React / Redux: Почему мои свойства в this.props не определены?
Я впервые пытаюсь настроить 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.info(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
}),
);Я добавил это в вопрос, это помогает? В моем вопросе я изменил начальное состояние с «Я свойство один» на «Пример свойства один», поэтому в моем вопросе он регистрируется не так, как в исходном состоянии.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
С учетом того, как combineReducers() использовался с state, переданным в качестве ключа, ваш mapStateToProps() должен будет выглядеть следующим образом для доступа к examplePropOne и examplePropTwo:
const mapStateToProps = state => ({
examplePropOne: state.state.examplePropOne,
examplePropTwo: state.state.examplePropTwo
});
Учитывая, что combReducers ():
The state produced by combineReducers() namespaces the states of each reducer under their keys as passed to combineReducers()
Проблема в том, что:
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
});
Надеюсь, это поможет!
Можете ли вы описать, что регистрируется, если вы помещаете
console.info(state);внутрьmapStateToProps()? Вам придется временно немного реструктурировать функцию. Также не могли бы вы рассказать, как вы регистрируете редуктор в своем магазине (createStore())?