13
1.纯函数的概念:Redux中的纯函数表示只要传入参数相同，返回计算得到的下一个 state 就一定相同。没有特殊情况、没有副作用，没有 API 请求、没有变量修改，单纯执行计算。
1)不能有副作用(不能对根数据就行改变)
2)什么样的输入就会有什么样的输出
2.Reducer中的概念分析:
1)Reducer就是纯函数,它接收先前的state和action,并返回新的state
function todos(state = [], action) {
switch (action.type) {
case 'ADD_TODO':
return state.concat([{ text: action.text, completed: false }]);
case 'TOGGLE_TODO':
return state.map((todo, index) => action.index === index ? { text: todo.text, completed: !todo.completed } : todo )
default: return state;
}
}
2)action是数据从应用传递到store中的有效载荷。它是store数据的唯一来源！一般来说你会通过store.dispatch() 将 action 传到 store。Action本质上是一个对象，但是我们约定，action 内必须使用一个字符串类型的 type 字段来表示将要执行的动作。除了 type 字段外，action 对象的结构完全由你自己决定。
3)Reducer 合并:在开发的时候,reducer也需要进行模块化分割,不同的模块定义不同的state初始值以及对state的更改,为了将所有的状态集中起来暴露,需要对reducer进行合并
let rootReducer = combineReducers({ studentState:studentReducer, memoState:memoReducer })
// 创建一个 Redux store 来以存放应用中所有的 state。应用中应有且仅有一个 store。
export default createStore(rootReducer)
4)在react中使用redux:我们已经可以创建store来管理应用中的大多数state,然后使用<Provider>让所有容器组件都可以访问store,而不必显示地传递它,只需要在渲染根组件时使用
import {Provider} from 'react-redux’
ReactDOM.render( <Provider store={store}> <App /> </Provider> , document.getElementById('root'));
3.react-reducer:就是react和context的结合(其中有个最重要的组件:Provider,在Provider中传递store,然后在Provider包裹的后代组件中connect方法中连接)
1)connect方法有四个参数,常用的前两个参数(mapStateToProps:将store中的state注入到当前组件的props中,mapDispatchToProps:将dispatch注入到props中,这个也可直接传入对象,对象里存放actionCreators,在调用时,直接用this.props.actionCreator(参数)调用,它会在内部自动把action dispatch出去
2)reducer里是纯函数,里面代码结构为switch结构,判断条件就为传的action参数中的type字段(action为执行阶段传的),reducer执行后返回新的state,但不改变它的结构
3)action中的type字段建议单独写在一个文件夹中防止写错,
4)action在工作中的写法通常为使用一个方法(方便动态改变action中的参数)返回action对象，这个通常也称actionCreator
4.使用reducer编程的步聚:
1)在reducers目录中创建reducer(它为纯函数,有两个参数,state和action):state可以有默认初始化的,action参数为对象里有type属性值,也可传变量参数,reducer根据action传进的type和不固定的参数来通过switch处理要做什么怎么做,返回新的state
2)合并reducer:如果有多个reducer,但createStore只能传一个参数时,可以通过combineReducers()方法,里面传对象合并reducer
3)在store.js中可以通过createStore()方法,里面传参reducer来创建一个store
4)然后使用react-reducer中Provider组件 <Provider store={store}/>来跨组件传值
5)然后在Provider包裹的后代组件中connect方法中连接 connect(mapStateToProps,{...actionCreators})(thisComponent) (直接传递actionCreators内部会有dispatch方法会把action传递给reducer）
6)然后就可以直接在当前组件的props中调用方法,及拿取值