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

});

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

});

• javascript
• reactjs
• redux

• Are you wrapping your app in a <Provider> and passing in the store? – David L. Walsh Commented Nov 26, 2015 at 3:38
• Yep. That's in a different file: render () { return ( <Provider store={this.props.store}> <div> <ReduxRouter> {routes} </ReduxRouter> {this.renderDevTools()} </div> </Provider> ); } It's all built off @davezuko 's React-Redux-Starter-Kit, so the basic wiring's pretty solid. – dangerismycat Commented Nov 26, 2015 at 7:22

1 Answer 1

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.