В настоящее время я следую этому учебнику. Я немного ударил с помощью mapStateToProps
в следующем коде:
import React from 'react';
import Voting from './voting';
import {connect} from 'react-redux';
const mapStateToProps = (state) => {
return {
pair: state.getIn(['vote','pair']),
winner: state.get('winner')
};
}
const VotingContainer = connect(mapStateToProps)(Voting);
export default VotingContainer;
Здесь импортируется компонент Voting:
import React from 'react';
import Vote from './Vote';
import Winner from './winner';
const Voting = ({pair,vote,hasVoted,winner}) =>
<div>
{winner ? <Winner winner={winner}/> :
<Vote pair={pair} vote={vote} hasVoted={hasVoted}/>
}
</div>
export default Voting;
Предполагается сделать две кнопки из pair
prop. vote
prop - это функция, которая будет выполняться при нажатии, hasVoted
отключает кнопки, когда true и победитель только отображает компонент победителя, как показано.
Ожидается, что состояние будет неизменным JS-картой, которая выглядит так:
Map({
vote:{
pair:List.of('Movie A','Movie B')
}
});
Вместо этого я получаю сообщение о том, что состояние undefined в строке state.getIn.
Код, устанавливающий состояние в индексе:
const store = createStore(reducer);
const socket = io(document.location.protocol + '//' + document.location.hostname + ':8090');
socket.on('state', state => store.dispatch({
type: 'SET_STATE',
state
}));
Я зарегистрировал store.getState()
после настройки, и он как и ожидалось, но undefined
в mapStateToProps
. Я также зарегистрировал переменную состояния в указанном выше контексте, и она также как и ожидалось.
Я также устанавливаю состояние нормально, и это удивительно работает!:
store.dispatch({
type: 'SET_STATE',
state: {
vote: {
pair: ['Movie A', 'Movie B']
}
}
});
Значение состояния выше - это именно то, что получено с сервера
Наконец, как выглядит мой редуктор:
import React from 'react';
import {Map, fromJS} from 'immutable';
const reducer = (state = Map(), action) => {
switch (action.type) {
case 'SET_STATE':
return state.merge(action.state);
}
}
export default reducer;
Что я делаю неправильно?
EDIT: я понял, что mapStateToProps
не вызывается после store.dispatch()
. Я прошел через docs по возможным причинам mapStateToProps
не вызывается, и он не один из них.