react-redux初探理解

ziwenxie 發(fā)布于2019-08-22 16:47 / 1878人閱讀

摘要：它的作用就是像它的名字那樣，建立一個(gè)從外部的對(duì)象到組件的對(duì)象的映射關(guān)系。比如表示從整個(gè)的表示當(dāng)前組件容器的用來(lái)建立組件的參數(shù)到方法的映射比如表示它定義了哪些用戶的操作應(yīng)該當(dāng)作，傳給。

最近做的項(xiàng)目加入了react-redux,對(duì)react-redux一直沒(méi)理解透徹，最近有時(shí)間把react-redux梳理了一番，希望能夠幫助到大家，

首先有這幾個(gè)文件，action,reducer,sage,組件，這幾個(gè)文件組成,下面來(lái)一一說(shuō)說(shuō)

Reducer==>純函數(shù)，只承擔(dān)計(jì)算 State 的功能，不合適承擔(dān)其他功能，也承擔(dān)不了，因?yàn)槔碚撋希兒瘮?shù)不能進(jìn)行讀寫操作,比如：

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==>存放數(shù)據(jù)的對(duì)象，即消息的載體，只能被別人操作，自己不能進(jìn)行任何操作。比如：

export const KEEP_PLAN_COMMON_METHOD = "keep_plan_common_method";

sage==>是處理異步的一個(gè)action，使用的是Generator，里面封裝了一些方法，比如：

takeEvery(pattern, saga, ...args) //在發(fā)起的 action 與 pattern 匹配時(shí)派生指定的 saga
takeLatest(pattern, saga, ..args) //只執(zhí)行最后一次saga任務(wù)，前面的都取消
take(pattern)
put(action)  //執(zhí)行dispatch
call(fn, ...args) //執(zhí)行異步函數(shù)
call([context, fn], ...args) //執(zhí)行異步函數(shù)
apply(context, fn, args) //執(zhí)行異步函數(shù)
cps(fn, ...args)
cps([context, fn], ...args)
fork(fn, ...args)
fork([context, fn], ...args)
join(task)
cancel(task)
select(selector, ...args)

sage只是返回了一個(gè)異步操作，然后一個(gè)回調(diào)如果想把值傳到state中，
需要調(diào)用yield put 再執(zhí)行一個(gè)dispatch,然后執(zhí)行reducer里面的操作，在reducer里面再執(zhí)行
return Object.assign({}, state, {...action.params});

mapStateToProps是一個(gè)函數(shù)。它的作用就是像它的名字那樣，建立一個(gè)從（外部的）state對(duì)象到（UI 組件的）props對(duì)象的映射關(guān)系。比如：

state表示從整個(gè)state的
ownProps表示當(dāng)前組件容器的props
mapStateToProps=(state,ownProps)=>{
    return {
        types: state.types,
    }
}

mapDispatchToProps 用來(lái)建立 UI 組件的參數(shù)到store.dispatch方法的映射,比如：

dispatch表示它定義了哪些用戶的操作應(yīng)該當(dāng)作 Action，傳給 Store。
ownProps表示當(dāng)前組件容器的props
function mapDispatchToProps(dispatch,ownProps){
    return {
        onClick: () => {
            dispatch({
                type: "SET_VISIBILITY_FILTER",
                filter: ownProps.filter
            });
        }
    }
}
export default connect(mapStateToProps,mapDispatchToProps)(Home);

每天進(jìn)步一點(diǎn)，希望大家喜歡，也希望喜歡的朋友點(diǎn)個(gè)贊，后續(xù)繼續(xù)更新...