react-redux初探理解

2024年3月9日 173次阅读 来源: 仅此而已
最近做的项目加入了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, saga, ..args) //只执行最后一次saga任务，前面的都取消
take(pattern)
put(action)  //执行dispatch
call(fn, ...args) //执行异步函数
call([context, fn], ...args) //执行异步函数
apply(context, fn, args) //执行异步函数
cps(fn, ...args)
cps([context, fn], ...args)
fork(fn, ...args)
fork([context, fn], ...args)
join(task)
cancel(task)
select(selector, ...args)

sage只是返回了一个异步操作，然后一个回调如果想把值传到state中，
需要调用yield put 再执行一个dispatch,然后执行reducer里面的操作，在reducer里面再执行
return Object.assign({}, state, {...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://segmentfault.com/a/1190000014634120
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞