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, 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
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞