鍍金池/ 問答/數(shù)據(jù)庫  HTML/ react.js中state,dispatch,action,reducer之間

react.js中state,dispatch,action,reducer之間的關(guān)系和作用是什么呢?

react.js中state,dispatch,action,reducer之間的關(guān)系和作用是什么呢?

@connect(
    state => ({
        projectGroupInfo: state.pManageReducer.getProjectGroupInfoResult,
        updateProjectResult: state.pManageReducer.updateProjectResult,
        deleteProjectResult: state.pManageReducer.deleteProjectResult,
        createProjectResult: state.pManageReducer.createProjectResult,
        createProjectLoading:  state.pManageReducer.createProjectLoading,
        updateProjectLoading:  state.pManageReducer.updateProjectLoading,
        deleteProjectLoading:  state.pManageReducer.deleteProjectLoading,
        projectGroupInfoLoading: state.pManageReducer.projectGroupInfoLoading,
        delMrAsynTaskConfigResult:  state.pManageReducer.delMrAsynTaskConfigResult,
        pManageReducer:  state.pManageReducer,
    }),
    dispatch => ({
        getProjectGroupInfo: bindActionCreators(getProjectGroupInfo, dispatch),
        updateProject: bindActionCreators(updateProject, dispatch),
        deleteProject: bindActionCreators(deleteProject, dispatch),
    })
)

上面的pManageReducer是什么意思呢?

action文件
export function getProjectGroupAllMembers(projectGroupId) {
    const path = "/workspace/listProjectGroupMembers";
    return {
        type: 'listProjectGroupMembers',
        payload: {
            promise: api.get(path,{
                params: {
                    projectGroupId
                }
            })
        },
        namespace
    }
}
回答
編輯回答
悶騷型

1、state
redux中只維護(hù)一個store樹,這個樹下存儲各個模塊的state
2、dispatch
表明觸發(fā)了一個修改state的操作,且只能通過dispatch觸發(fā)修改。它的參數(shù)是一個action,看下面
3、action
action表示當(dāng)前dispatch(操作)的類型和載荷(數(shù)據(jù))(payload),比方說我要修改系統(tǒng)主題色,那這個action可能就這么定義了{(lán)type: 'CHANGE_THEME', color: 'red'},其中type是約定俗成的參數(shù),且必填
4、reducer
是一個純函數(shù),用來修改state的,接收兩個參數(shù) state和action,生成一個新的state返回

補充
先了解redux基礎(chǔ)實現(xiàn),暫不用管react-redux,react-redux只是redux在react下的應(yīng)用,redux也可以和angular、原生js結(jié)合使用。所以有時候你看到的provider、connect只是在react下應(yīng)用而已,不屬于redux核心概念的范疇。
1、provider
要了解provider必須知道react中context的概念,通過context可以將組件狀態(tài)store傳遞到各個子組件,而不需要顯示的props一層一層傳遞下去。react-redux中就是將store存在了context中
2、connect
顧名思義,起到了鏈接的作用。store傳遞到子組件需要通過connect鏈接來建立prop和state、prop和dispatch的對應(yīng)關(guān)系。它會統(tǒng)一的從context中取出store, 然后store中的數(shù)據(jù)都是通過mapStateToProps "傳"到props,你就可以拿來顯示啦;你修改store的操作,也通過mapDispatchToProps "傳" 到props,你就可以修改數(shù)據(jù)啦

2018年7月2日 08:12
編輯回答
怣痛

你好,這篇文字應(yīng)該能解決你的疑問:關(guān)系揭秘,有不懂的歡迎交流。

2018年9月11日 18:10
編輯回答
故林

你的問題應(yīng)該是redux的原理。
簡單做以下解釋:
1、Redux是將react的state進(jìn)行全局管理,也就是管理整個項目的state。
2、redux通過connect高階函數(shù)將state與react組件相連。也就是react要獲取state的值,必須通過connect.
3、react通過dispatch一個action來set state.
4、在redux中,當(dāng)dispatch一個actioner(函數(shù))時,會通過reducer來更新state。

以上就是他們的關(guān)系。

2018年5月16日 01:44
編輯回答
胭脂淚

簡單點的說就是action=>dispatch=>reducer=>state=>action loop

2018年7月3日 14:17