初识redux走向redux-react
废话不多说,先上一张图
首先记住redux设计思想
Web应用是一个转态机,视图与转态是一一对应的
所有的转态,保存在一个对象里
1.store
存储数据的容器,整个应用只有一个state,Redux提供createStore这个函数生成Store,Redux store保存了根reducer返回的完整state树
const { createStore } = require('redux')
//创建store的时候就要把reducer放进去,reducer改state,state写在reducer里
//store提供三个方法
/*
store.getState() 获取state
store.dispatch(action) 更新state
store.subscribe(listener) 注册监听器
*/
const store = createStore(reducer)
console.log(store)
// subscript是个订阅函数,他在状态发生变化的时候,自动调用
store.subscribe(() => {
console.log(store.getState())
}) // 调用store.dispatch, 会再次执行reducer
setInterval(() => {
store.dispatch({
type: 'increment',
//负载,载荷
payload: 4
})
}, 1000)
2.State
Store对象包含所有数据。如果想的得到某个时点的数据,就要对Store生成快照。这种时点的数据集合,就叫State。当前时刻的State,可以通过store.getState()拿到。
一个State对应一个View,只要State相同,View就相同。
3.Action
View通过Action导致State发生变化
store.dispatch()是View发出Action的唯一方法。携带一个Action对象作为参数,将它发送出去。
Action是一个对象。其中的type属性是必须的,表示Action的名称。payload是它携带的信息。
可以这样理解,Action描述当前发生的事情。改变State的唯一办法,就是使用Action。他会运送数据到Store。
Action Creator: view要发送多少种消息,就会有多少种Action。通过Action Creator函数来生成Action
4.reducer
reducer就是实现(state,action)=> newState的纯函数--正真处理state的地方。不修改原来的state,而是通过返回新的state的方式去修改。
纯函数 同样的输入一定会有同样的输出
const reducer = (state = defaultState, action) => {
// redux会在开始的时候执行一次reducer, action.type = @@redux/INITc.v.p.a.u.f
if (action.type === 'increment') {
return {
//state = 1 直接修改state不允许 state + 1 可以
//state定义对象,在这里返回的时候也要返回对象
count: state.count + action.payload
}
}
return state
}
撸到这里是不是有点云里雾里,
下面来看一个redux实现的加减栗子
Counter.js
import React, { Component } from 'react' import store from './store' class Counter extends Component {
constructor (props) {
super(props)
this.increment = this.increment.bind(this)
this.decrement = this.decrement.bind(this) this.state = {
count: store.getState()
} store.subscribe(this.changeCount.bind(this))
}
render () {
return (
<div>
<button onClick={this.decrement}>-</button>
{ this.state.count }
<button onClick={this.increment}>+</button>
</div>
)
}
increment () {
store.dispatch({
type: 'increment'
})
}
decrement () {
store.dispatch({
type: 'decrement'
})
} changeCount () {
this.setState({
count: store.getState()
})
}
} export default Counter
store.js
import { createStore } from 'redux' const defaultState = 1 const reducer = (state = defaultState, action) => {
switch (action.type) {
case 'increment' :
return state + 1
case 'decrement' :
return state - 1
default :
return state
}
} const store = createStore(reducer) export default store
初识redux走向redux-react的更多相关文章
- Redux:with React(一)
作者数次强调,redux和React没有关系(明明当初就是为了管理react的state才弄出来的吧),它可以和其他插件如 Angular, Ember, jQuery一起使用.好啦好啦知道啦.Red ...
- [转] What is the point of redux when using react?
As I am sure you have heard a bunch of times, by now, React is the V in MVC. I think you can think o ...
- [Redux] Filtering Redux State with React Router Params
We will learn how adding React Router shifts the balance of responsibilities, and how the components ...
- [Redux] Navigating with React Router <Link>
We will learn how to change the address bar using a component from React Router. In Root.js: We need ...
- 25.redux回顾,redux中的action函数异步
回顾:Redux: 类似于 Vuex 概念:store/reducer/action action:动作 {type,.....} 一定要有type 其他属性不做限制 reducer:通过计算产生st ...
- React-安装和配置redux调试工具Redux DevTools
chrome扩展程序里搜索Redux DevTools进行安装 新建store的时候,进行如下配置. import { createStore, applyMiddleware ,compose} f ...
- Redux 和 Redux thunk 理解
1: state 就像 model { todos: [{ text: 'Eat food', completed: true }, { text: 'Exercise', completed: fa ...
- [Redux] Understand Redux Higher Order Reducers
Higher Order Reducers are simple reducer factories, that take a reducer as an argument and return a ...
- 手把手教你撸一套Redux(Redux源码解读)
Redux 版本:3.7.2 Redux 是 JavaScript 状态容器,提供可预测化的状态管理. 说白了Redux就是一个数据存储工具,所以数据基础模型有get方法,set方法以及数据改变后通知 ...
随机推荐
- Python基础之 函数名,闭包,和迭代器
1.函数名作用 函数名本质上就是函数的内存地址或对象. 1.可以被引用 2.可以被当作容器类型的元素 3.可以当作函数的参数和返回值 4.如果记不住的话,那就记住一句话,就当普通变量用 2.闭包 什么 ...
- Linux下Netty实现高性能UDP服务(SO_REUSEPORT)
参考: https://www.jianshu.com/p/61df929aa98b SO_REUSEPORT学习笔记:http://www.blogjava.net/yongboy/archive/ ...
- 20.C# 创建自己的泛型类型
1.定义泛型类 可以使用以下语法创建泛型类,T可以是任意符合C#标识符命名规范的任意标识符 class MyGenericClass<T> { //.... } 泛型类可以包含任意多个类型 ...
- windows----------如何禁用PC端微信的开机启动
1.开始菜单--->运行--->输入msconfig 2.如下图,然后点击启动 3.打开任务管理器 4.右键wechat,然后禁用.
- ACM-ICPC 2018 南京赛区网络预赛(A, J)
A 签到题 Alice, a student of grade 666, is thinking about an Olympian Math problem, but she feels so d ...
- Xamarin.Forms踩坑集锦(持续更新)
1.ImageButton控件 问题:ImageButton在切换图片的时候,图片大小会改变. Github Issue:ImageButton changes image size · Issue ...
- 莫名奇妙虚拟机 ip addr 不显示 ip 地址,连不上网络
CentOS7 Failed to start LSB: Bring up/down networking. 说是mac地址不对.其实,本人并没有配置mac,按理说用的默认的.之前一直是可以正常工作的 ...
- CAN自收自发问题小结
2011-12-02 21:59:23 流程图: CAN自收自发问题小结 1,地址如何确定? 答:51的片外扩展地址,R/W脚的电平会根据代码自动更改,不需要设置. 参考 单片机的外部存储器的 ...
- left join on +多条件与where区别
left join on +多条件与where区别 重点 先匹配,再筛选where条件. 本文将通过几个例子说明两者的差别. 1. 单个条件 select * from product a left ...
- MySQL触发器在建立时,报语法错的问题
delimiter $$ create trigger trg_delete_on_users before DELETE on users for each row begin delete fro ...