最近做的项目加入了react-redux,对react-redux一直没理解透彻,最近有时间把react-redux梳理了一番,希望能够帮助到大家,
首先有这几个文件,action,reducer,sage,组件,这几个文件组成,下面来一一说说
Reducer==>纯函数,只承担计算 State 的功能,不合适承担其他功能,也承担不了,因为理论上,纯函数不能进行读写操作,比如:
import * as Act from 'actions'; const initState = { } export default function keepplan(state = initState,action) { switch(action.type) { // case Act.SET_USER_LIST: // return Object.assign({},state,{ // user_list: action.user_list // }); default: return state; } }
Action==>存放数据的对象,即消息的载体,只能被别人操作,自己不能进行任何操作。比如:
export const KEEP_PLAN_COMMON_METHOD = 'keep_plan_common_method';
sage==>是处理异步的一个action,使用的是Generator,里面封装了一些方法,比如:
takeEvery(pattern,saga,...args) //在发起的 action 与 pattern 匹配时派生指定的 saga takeLatest(pattern,..args) //只执行最后一次saga任务,前面的都取消 take(pattern) put(action) //执行dispatch call(fn,...args) //执行异步函数 call([context,fn],...args) //执行异步函数 apply(context,fn,args) //执行异步函数 cps(fn,...args) cps([context,...args) fork(fn,...args) fork([context,...args) join(task) cancel(task) select(selector,...args) sage只是返回了一个异步操作,然后一个回调如果想把值传到state中, 需要调用yield put 再执行一个dispatch,然后执行reducer里面的操作,在reducer里面再执行 return Object.assign({},{...action.params});
mapStateToProps是一个函数。它的作用就是像它的名字那样,建立一个从(外部的)state对象到(UI 组件的)props对象的映射关系。比如:
state表示从整个state的 ownProps表示当前组件容器的props mapStateToProps=(state,ownProps)=>{ return { types: state.types,} }
mapDispatchToProps 用来建立 UI 组件的参数到store.dispatch方法的映射,比如:
dispatch表示它定义了哪些用户的操作应该当作 Action,传给 Store。 ownProps表示当前组件容器的props function mapDispatchToProps(dispatch,ownProps){ return { onClick: () => { dispatch({ type: 'SET_VISIBILITY_FILTER',filter: ownProps.filter }); } } } export default connect(mapStateToProps,mapDispatchToProps)(Home);
每天进步一点,希望大家喜欢,也希望喜欢的朋友点个赞,后续继续更新...
原文链接:https://www.f2er.com/react/301616.html