I use React and Redux for the project, and I am having problems implementing the on / off button function. I could:
- call method
- this method launches the action creator
- send action
- catch this action in the gearbox and create a new updated state
- see updated status in Redux DevTools
However, the on / off function still does not work, since it seems that mapStateToPropsthey connectdo not actually display the status in the details. I keep track of canSubmitwhich changes in state, but undefinedin the details. What am I missing to successfully match the status with props?
Relevant Code:
UserFormView.js
const mapStateToProps = (state) => ({
routerState: state.router,
canSubmit: state.canSubmit
});
const mapDispatchToProps = (dispatch) => ({
actions: bindActionCreators(ActionCreators, dispatch)
});
class UserFormView extends React.Component {
...
}
export default connect(mapStateToProps, mapDispatchToProps)(UserFormView);
Actions:
export function enableSubmit(payload) {
return {
type: ENABLE_SUBMIT,
payload: payload
};
}
export function disableSubmit(payload) {
return {
type: DISABLE_SUBMIT,
payload: payload
};
}
Reducer (using the createReducer helper function):
const initialState = {
canSubmit: false
};
export default createReducer(initialState, {
[ENABLE_SUBMIT]: (state) => {
console.log('enabling');
return Object.assign({}, state, {
canSubmit: true
});
},
[DISABLE_SUBMIT]: (state) => {
console.log('disabling');
return Object.assign({}, state, {
canSubmit: false
});
}
});