react-redux初探理解

最近做的项目加入了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);

每天进步一点，希望大家喜欢，也希望喜欢的朋友点个赞，后续继续更新...

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!