Redux 状态在 mapStateToProps 中未定义

Question

我目前正在学习 this 教程。我在以下代码中遇到了一些涉及 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;

这是导入的投票组件：

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 属性的两个按钮。 vote 属性是一个将在点击时执行的函数，hasVoted 在 true 和 winner 仅呈现 winner 组件时禁用按钮，如图所示。

状态应该是一个不可变的 JS 映射，如下所示：

Map({
  vote:{
    pair:List.of('Movie A','Movie B')
  }
});

相反，我收到一条错误消息，指出 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;

我做错了什么？

编辑：我意识到 mapStateToProps 在 store.dispatch() 之后没有被调用。由于可能的原因 mapStateToProps 没有被调用而且它不是其中之一，我经历了 docs。

Answer 1

您的减速器在 switch 语句中没有默认操作。这就是为什么即使您在 reducer 参数中提到了初始状态，undefined 仍作为存储初始状态返回

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);
    default:
      return state;
  }
}

export default reducer;

添加默认语句将解决问题:)

Answer 2

我也到了这里，因为我未能将我的 rootreducer 函数传递给我的 createStore 方法。我有：

const store = createStore(applyMiddleware(...middlewares));

我需要：

const store = createStore(rootReducer(), applyMiddleware(...middlewares));

Redux 状态在 mapStateToProps 中未定义

Redux state is undefined in mapStateToProps

javascript

reactjs

immutable.js

redux

react-redux