Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React / Redux: mapStateToProps not actually mapping state to props

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:

  • trigger a method
  • have that method trigger an action creator
  • dispatch an action
  • catch that action in the reducer and create a new, updated state
  • see the updated state in Redux DevTools

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
    });
  }

});
like image 497
dangerismycat Avatar asked Nov 26 '15 03:11

dangerismycat


People also ask

What does mapStateToProps do in Redux?

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.

Is mapStateToProps a selector?

Typically, you use selectors to create props objects within a mapStateToProps function. This is a core feature of react-redux's connect function.

What do mapStateToProps and mapDispatchToProps actually do?

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.


1 Answers

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.

like image 100
Victor Suzdalev Avatar answered Nov 01 '22 19:11

Victor Suzdalev