React / Redux: Почему мои свойства в this.props не определены?

Question

Я пытаюсь настроить Redux в React в первый раз, и я не могу передать свое начальное состояние из хранилища компоненту. Мой файл хранилища устанавливает состояние для возвращаемого значения редуктора. Вот что происходит, когда я регистрирую this.props на консоли

Компонент

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

Редуктор

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

Действие

import { EXAMPLE_ACTION } from './types'


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

[Изменить]

Вот что происходит, когда я регистрирую состояние в mapStateToProps

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


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

Answer 1

При использовании combineReducers() с state, переданным в качестве ключа, ваш mapStateToProps() должен будет выглядеть следующим образом, чтобы получить доступ к examplePropOne и examplePropTwo:

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

Учитывая, что ОбъединитьReducers () :

Состояние, создаваемое пространством имен combReducers (), содержит состояния каждого редуктор под их ключами, как это передано в сочетании с RedReducers ()

Проблема в том, что:

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

Ключ state, переданный combineReducers(), создал пространство имен / свойство state. С аргументом state для mapStateToProps() требует, чтобы к свойствам обращались как state.state. Вероятно, это можно решить, дав вместо этого переданному ключу combineReducers() более описательное имя, представляющее, что используется для управления в хранилище. Например, если это связано с аутентификацией, его можно назвать примерно таким, как auth. Это будет выглядеть так:

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

// ...

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

Надеюсь, это поможет!