react.js中state，dispatch，action，reducer之间的关系和作用是什么呢？

Question

react.js中state，dispatch，action，reducer之间的关系和作用是什么呢？

@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
    }
}

Answer 1

1、state
redux中只维护一个store树，这个树下存储各个模块的state
2、dispatch
表明触发了一个修改state的操作，且只能通过dispatch触发修改。它的参数是一个action，看下面
3、action
action表示当前dispatch（操作）的类型和载荷（数据）（payload），比方说我要修改系统主题色，那这个action可能就这么定义了{type: 'CHANGE_THEME', color: 'red'}，其中type是约定俗成的参数，且必填
4、reducer
是一个纯函数，用来修改state的，接收两个参数 state和action，生成一个新的state返回

补充
先了解redux基础实现，暂不用管react-redux，react-redux只是redux在react下的应用，redux也可以和angular、原生js结合使用。所以有时候你看到的provider、connect只是在react下应用而已，不属于redux核心概念的范畴。
1、provider
要了解provider必须知道react中context的概念，通过context可以将组件状态store传递到各个子组件，而不需要显示的props一层一层传递下去。react-redux中就是将store存在了context中
2、connect
顾名思义，起到了链接的作用。store传递到子组件需要通过connect链接来建立prop和state、prop和dispatch的对应关系。它会统一的从context中取出store， 然后store中的数据都是通过mapStateToProps "传"到props，你就可以拿来显示啦；你修改store的操作，也通过mapDispatchToProps "传" 到props，你就可以修改数据啦

Answer 2

你的问题应该是redux的原理。
简单做以下解释：
1、Redux是将react的state进行全局管理，也就是管理整个项目的state。
2、redux通过connect高阶函数将state与react组件相连。也就是react要获取state的值，必须通过connect.
3、react通过dispatch一个action来set state.
4、在redux中，当dispatch一个actioner(函数)时，会通过reducer来更新state。

以上就是他们的关系。

Answer 3

简单点的说就是action=>dispatch=>reducer=>state=>action loop

Answer 4

你好，这篇文字应该能解决你的疑问：关系揭秘，有不懂的欢迎交流。