React / Redux：为什么我在this.props中的属性未定义？

Question

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 component. 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, combineReducers } from 'redux'; import reducers from '../reducers'; export const store = createStore( combineReducers({ state: reducers }), ); 

Answer 1

With how combineReducers() 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 combineReducers() :

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

The issue is that:

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

The key state passed to combineReducers() 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 combineReducers() 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(
  combineReducers({
    auth: reducers
  }),
);

// ...

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

Hopefully that helps!