CODEWITHSUNDEEP
javascriptreactjsreduxreact-redux
qleguennec
qleguennec

Reputation: 544

Applying an argument in mapStateToProps

This is a simple component that displays a counter and two buttons to increment/decrement it.

class App extends Component {
  render() {
    return (
      <div className="App">
        <h1>{this.props.counter}</h1>
        <button type="button" onClick={this.props.increment}>
          increment
        </button>
        <button type="button" onClick={this.props.decrement}>
          decrement
        </button>
      </div>
    );
  }    
}

const mapStateToProps = state => ({
  counter: state.counter
});

const mapDispatchToProps = dispatch => ({
  increment: () => dispatch({ type: "INCREMENT" }),
  decrement: () => dispatch({ type: "DECREMENT" })
});

App.propTypes = {
  counter: PropTypes.number.isRequired,
  increment: PropTypes.func.isRequired,
  decrement: PropTypes.func.isRequired
};

export default connect(mapStateToProps, mapDispatchToProps)(App);

This is a minimal example, but in real life, I need a lot of props in mapStateToProps, that all require the state arg. I am trying to apply the state arg to all the values in the mapStateToProps object return. Something like this:

const mapStateToProps = state => ({
  user: getCurrentUser(state),
  page: getPage(state),
  // ... f(state)
});

What I tried:

const mapStateToProps = state =>
  _.mapValues(
    {
      counter: state => state.counter
    },
    state
  );

I got this error: proxyConsole.js:56 Warning: Failed prop type: Invalid propcounterof typebooleansupplied to 'App', expected 'number'. What am I doing wrong?

Upvotes: 0

Views: 350

Answers (1)

Edgar Henriquez
Edgar Henriquez

Reputation: 1383

The error says that counter is a boolean and you're expecting a number. As you can see at the bottom of your code where the propTypes are specified.

App.propTypes = {
    counter: PropTypes.number.isRequired,
    increment: PropTypes.func.isRequired,
    decrement: PropTypes.func.isRequired
};

Make sure counter is a number.

Upvotes: 1

Related Questions