react-redux初探理解

前端之家收集整理的这篇文章主要介绍了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);

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

猜你在找的React相关文章