I am trying to set up Redux in React for the first time and I can't seem to pass my initial state from the store to the ponent. My store file is setting state to the return value of the reducer. Here is what happens when I log this.props to the console

Component

import React from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { exampleAction } from '../../actions';

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {}
  }

    render() {
      console.log(this.props)
      return (
        <div>
          <p>this is {this.props.examplePropOne}</p>
        </div>
      );
    } 
  }

  const mapStateToProps = state => ({
    examplePropOne: state.examplePropOne,
    examplePropTwo: state.examplePropTwo
  });

  const mapDispatchToProps = dispatch => {
    return bindActionCreators({ exampleAction }, dispatch)
  }

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

I am trying to set up Redux in React for the first time and I can't seem to pass my initial state from the store to the ponent. My store file is setting state to the return value of the reducer. Here is what happens when I log this.props to the console

Component

import React from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { exampleAction } from '../../actions';

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {}
  }

    render() {
      console.log(this.props)
      return (
        <div>
          <p>this is {this.props.examplePropOne}</p>
        </div>
      );
    } 
  }

  const mapStateToProps = state => ({
    examplePropOne: state.examplePropOne,
    examplePropTwo: state.examplePropTwo
  });

  const mapDispatchToProps = dispatch => {
    return bindActionCreators({ exampleAction }, dispatch)
  }

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

Reducer

import { EXAMPLE_ACTION } from './../actions/types'

const initialState = {
  examplePropOne : 'Example Property One',
  examplePropTwo : 'Example Property Two'
}

export default function (state = initialState, action) {
  switch(action.type) {
    case EXAMPLE_ACTION: 
      return {
        ...state,
        examplePropOne: action.payload
      }
    default: 
      return state
  }
}

Action

import { EXAMPLE_ACTION } from './types'


export const exampleAction = text =>  ({
  type: EXAMPLE_ACTION,
  payload: text,
})

[Edit]

Here is what happens when I log the state within mapStateToProps

import React from 'react';
import { createStore, bineReducers } from 'redux';
import reducers from '../reducers';


export const store = createStore(
  bineReducers({
    state: reducers
  }),
);

• javascript
• reactjs
• redux
• react-redux

Share Improve this question Follow edited Nov 8, 2018 at 22:22 Claire asked Nov 8, 2018 at 22:08 ClaireClaire 1311 silver badge44 bronze badges 2

• Can you describe what is logged if you put console.log(state); inside mapStateToProps()? You'll have to restructure the function temporarily a bit. Also can you please share how you are registering the reducer with your store (createStore())? – Alexander Staroselsky Commented Nov 8, 2018 at 22:12
• I have added that into the question does that help? In my question I changed the initial state from 'I am property one' to 'Example Property One' so that is why it's logging differently from the initial state in my question – Claire Commented Nov 8, 2018 at 22:23

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

With how bineReducers() was used with state passed in as a key, your mapStateToProps() would need to look like this instead to access examplePropOne and examplePropTwo:

const mapStateToProps = state => ({
  examplePropOne: state.state.examplePropOne,
  examplePropTwo: state.state.examplePropTwo
});

Given that bineReducers():

The state produced by bineReducers() namespaces the states of each reducer under their keys as passed to bineReducers()

The issue is that:

export const store = createStore(
  bineReducers({
    state: reducers
  }),
);

The key state passed to bineReducers() created a namespace/property of state. With the argument named state for the mapStateToProps(), requires that properties are accessed as state.state. This can probably be resolved by instead giving the key passed to bineReducers() a more descriptive name representing what is being used to manage in the store. For example, if it's related to authentication, it could be called some like auth. It would look like:

export const store = createStore(
  bineReducers({
    auth: reducers
  }),
);

// ...

const mapStateToProps = state => ({
  examplePropOne: state.auth.examplePropOne,
  examplePropTwo: state.auth.examplePropTwo
});

Hopefully that helps!