在 mapStateToProps 中未定义 Redux 状态

Posted 2023-02-22

【中文标题】在 mapStateToProps 中未定义 Redux 状态

【英文标题】：Redux state is undefined in mapStateToProps

【发布时间】：2016-12-22 21:38:11

【问题描述】：

我目前正在关注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 仅呈现如图所示的获胜者组件。

状态应该是一个不可变的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']
    
  
);

上面的 state 的值正是从服务器接收到的值

最后这是我的减速器的样子：

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() 之后没有被调用。我查看了docs 可能是因为mapStateToProps 没有被调用而且它不是其中之一。

【问题讨论】：

我建议您将redux-logger 添加到现有中间件中，以验证操作是否正确调度；它可以给我们一个更好的主意

@Deadfish 感谢您的建议。我使用了 redux-logger，并且动作被正确分派，尽管我不知道为什么之前的状态是未定义的，因为我的初始状态是一个空的 Map。我还意识到，对于涉及服务器的那个，mapStateToProps 在调度之后不会被调用。

我认为当状态发生突变时不会调用mapStateToProps；但是您的减速器代码看起来不错；你能通过 github 或 gist 分享你的整个代码吗？它的设置方式一定有问题

@Deadfish 当然，server 和 client

【参考方案1】：

你的 reducer 在 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;

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

【讨论】：

非常感谢@Deadfish！因为这个错误，我真的重做了this 整个播放列表。再次感谢！

【参考方案2】：

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

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

我需要：

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