多应用+插件架构,代码干净,二开方便,首家独创一键云编译技术,文档视频完善,免费商用码云13.8K 广告
## reducer **Reducers** 指定了应用状态的变化如何响应 actions 并发送到 store 的,记住 **actions** 只是描述了有事情发生了这一事实,并没有描述应用如何更新 `state`。 注意:`reducer`是一个纯函数,接受`action`和旧的`state`,生成新的`state`。 `src/redux/reducers/counter.js` ~~~ /* 引用actions里定义的action常量 */ import { INCREMENT, DECREMENT, RESET } from 'actions/counter' /* 初始化state */ const initState = { count: 0 } /* *reducer *reducer就是纯函数,接收state 和 action,然后返回一个新的 state */ export default function reducer(state = initState, action) { switch (action.type) { case INCREMENT: return { count: state.count + 1 } case DECREMENT: return { count: state.count - 1 } case RESET: return { count: 0 } default : return state } } ~~~ 一个项目可以有很多个rducer,我们把它们统一管理。 `src/redux/reducers.js` ~~~ import counter from './reducers/counter' // reducer就是纯函数,接收state 和 action,然后返回一个新的 state export default function combineReducers(state = {}, action) { return { counter: counter(state.counter, action) } } ~~~ ### `reducer`就是纯函数,接收`state` 和 `action`,然后返回一个新的 `state`。 看看上面的代码,无论是`combineReducers`函数也好,还是`reducer`函数也好(函数名可以不写),都是接收`state`和`action`,都是返回更新后的`state`。区别就是`combineReducers`函数是处理整棵树,`reducer`函数是处理树的某一点。 下一节,我们要创建一个`store`,`store`需要一个单一的`reducers`,`reducers`包含散落在整个应用中所有的`reducer`。