I'm using React and Redux on a project, and I'm having problems implementing a feature to enable/disable a button. I've been able to:
However, the enable/disable functionality still doesn't work, as it seems that mapStateToProps
and connect
aren't actually mapping the state to the props. I'm tracking canSubmit
, which changes within the state but is undefined
in the props. What am I missing to successfully map the state to the 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 a 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
});
}
});
As the first argument passed in to connect , mapStateToProps is used for selecting the part of the data from the store that the connected component needs. It's frequently referred to as just mapState for short. It is called every time the store state changes.
Typically, you use selectors to create props objects within a mapStateToProps function. This is a core feature of react-redux's connect function.
The mapStateToProps and mapDispatchToProps deals with your Redux store's state and dispatch , respectively. state and dispatch will be supplied to your mapStateToProps or mapDispatchToProps functions as the first argument.
Seems like you're not creating reducer with key canSubmit
. It depends on your store configuration, to be more specific — on how you import your default export from reduces file. Another thing to mention here, it's likely you'll have reducer with the name canSubmit
and a key canSubmit
, so you'll need to reference it in code like state.canSubmit.canSubmit
— you're returning object from action handlers on reducer, not simple true
or false
boolean values.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With