一.Redux是什么?
redux跟flux一样,也是一个数据管理框架,它是以flux框架的理念为基础,更优雅的实现数据流的管理。
二.设计思想
- web应用是一个状态机,视图和状态是一一对应的。
- 所有的状态,保存在一个对象里面。
三.基本原则
- 唯一数据源,也就是说整个应用只有一个store。
- 保持状态只读,不能直接去修改store的状态,要想修改,必须通过派发action。
- 数据改变只能通过纯函数(reducer)完成。
四.工作流程
-
首先,用户发出action。
store.dispatch(Actions.increment(this.props.caption));
其中Actions.increment返回一个action对象,具体的派发工作在view中完成。
-
然后,store自动调用reducer,并且传入两个参数:当前的state和接收到的action。然后,reducer会根据这个action,更新state。但是,要注意,这里reducer只是返回一个新的state给store,具体的更新工作由store自身完成。
// reducer函数 export default (state, action) => { const {counterCaption} = action; switch (action.type) { case ActionTypes.INCREMENT: // 在这只是返回一个新的state,具体的更新工作,还是由store完成。 return {...state, [counterCaption]: state[counterCaption] + 1}; case ActionTypes.DECREMENT: return {...state, [counterCaption]: state[counterCaption] - 1}; default: return state } }
-
state一旦有变化,store就会调用监听函数
componentDidMount() { store.subscribe(this.onChange); }
-
在监听函数中,可以通过store.getState()得到当前状态,然后再通过store.setState()设置新状态,从而驱动组件的重新渲染。
// 监听函数 onChange() { this.setState(this.getOwnState()); } // 获取store数据 getOwnState() { return { value: store.getState()[this.props.caption] }; }
五.总结
store 收到 action 以后,必须给出一个新的 state,这样 view 才会发生变化。这种 state 的计算过程就叫做 reducer。并且,reducer只负责计算状态,不负责存储状态。