actions =》reducer =》store
一. action(描述要发生的事情) 既有普通的对象,又有能返回对象的创建函数,都可以传入dispatch()中
二. reducer中,传入一个值只会得到一个结果,每次都这样。这意味着:reducer内不能做以下的事情:
修改传入的参数
执行副作用的操作,如API请求和路由跳转
调用非纯函数,如Date().now 或 Math.radom()
三. store: 我们学会了使用 action 来描述“发生了什么”,和使用 reducers 来根据 action 更新 state 的用法。Store 就是把它们联系到一起的对象。再次强调一下 Redux 应用只有一个单一的 store。当需要拆分数据处理逻辑时,你应该使用 reducer 组合 而不是创建多个 store。
Store 有以下职责:
维持应用的 state;
提供 getState() 方法获取 state;
提供 dispatch(action) 方法更新 state;
通过 subscribe(listener) 注册监听器;
通过 subscribe(listener) 返回的函数注销监听器。
通过replaceReducer(nextReducer)可以替换掉当前的reducer
四.Redux 应用中数据的生命周期遵循下面 4 个步骤:
调用store.dispatch(action) :你可以在任何地方调用 store.dispatch(action),包括组件中、XHR 回调中、甚至定时器中。
redux store 调用传入的根reducer函数:
根 reducer 应该把多个子 reducer 输出合并成一个单一的 state 树:使用combineReducers()
Redux store 保存了根 reducer 返回的完整 state 树。这个新的树就是应用的下一个 state!所有订阅 store.subscribe(listener) 的监听器都将被调用;监听器里可以调用 store.getState() 获得当前 state。
现在,可以应用新的 state 来更新 UI。如果你使用了 React Redux 这类的绑定库,这时就应该调用 component.setState(newState) 来更新。
五. 容器组件与UI组件,顾名思义,UI组件只负责样式,容器组件负责将UI组件结合起来并负责传递数据
容器组件就是使用 store.subscribe() 从 Redux state 树中读取部分数据,并通过 props 来把这些数据提供给要渲染的组件
你可以手工来开发容器组件,但建议使用使用 React Redux 库的 connect() 方法来生成,这个方法做了性能优化来避免很多不必要的重复渲染。(这样你就不必为了性能而手动实现 React 性能优化建议 中的 shouldComponentUpdate 方法。)
使用 connect() 前,需要先定义 mapStateToProps 这个函数来指定如何把当前 Redux store state 映射到展示组件的 props 中 export default connect(mapStateToProps)(组件)
- redux 的性能问题:redux-in-chinese