What is the relationship and function of state,dispatch,action,reducer in react.js?

What is the relationship and function of state,dispatch,action,reducer in

react.js? 

@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),
    })
)
What does the pManageReducer above mean? 

action
export function getProjectGroupAllMembers(projectGroupId) {
    const path = "/workspace/listProjectGroupMembers";
    return {
        type: "listProjectGroupMembers",
        payload: {
            promise: api.get(path,{
                params: {
                    projectGroupId
                }
            })
        },
        namespace
    }
}
React.js javascript
Jun.02,2021

1, only one store tree is maintained in state
redux. The storage of state
2 and dispatch
of each module under this tree indicates that an operation to modify state has been triggered, and the modification can only be triggered through dispatch. Its parameter is an action, see below
3, action
action indicates the current dispatch (operation) type and payload (data) (payload), for example, I want to modify the system theme color, then this action may thus define {type: 'CHANGE_THEME', color:' red'}, where type is a conventional parameter, and required
4, reducer
is a pure function used to modify state, receiving two parameters state and action, Generate a new state return

add
first understand the basic implementation of redux. Never mind that react-redux,react-redux is only the application of redux under react. Redux can also be used in combination with angular and native js. So sometimes the provider and connect you see are just used under react and do not fall within the scope of the core concepts of redux.
1, provider
to understand provider, you must know the concept of context in react. Component state store can be passed to each subcomponent through context, without the need for the displayed props to be passed layer by layer. In react-redux, store is stored in context
2, and connect
, as the name implies, acts as a link. Passing store to child components requires connect links to establish the correspondence between prop and state, prop and dispatch. It will uniformly extract store, from context, and then all the data in store will be "transferred" to props, through mapStateToProps, and you can display it. If you modify the operation of store, you can also "transfer" to props, through mapDispatchToProps, and you can modify the data

.

your problem should be the principle of redux.
simply explain as follows:
1. Redux is the global management of state of react, that is, state that manages the entire project.
2, redux connects state to react components through connect higher-order functions. That is, to get the value of state , react must use connect .
3. React uses dispatch a action to set state .
4. In redux, when dispatch an actioner (function), the state will be updated through reducer.

the above is their relationship.

to put it simply, action= > dispatch= > reducer= > state= > action loop

Hello, this text should be able to solve your questions: relationship , welcome to communicate if you don't understand.

Previous: On the question of whether the loop setting in echarts,effect circulates or not

Next: Querylist3.0 crawl error

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b3ed42-2bc90.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b3ed42-2bc90.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?