小编典典

在mapStateToProps中未定义Redux状态

reactjs

我目前正在关注教程。我遇到了一些涉及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道具渲染两个按钮。该voteprop是一项将在单击hasVoted时执行的功能,当为true时将禁用按钮,并且获胜者仅呈现如图所示的获胜者组件。

该状态应该是一个如下所示的immutableJS映射:

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是没有被调用,也不是其中之一。


阅读 410

收藏
2020-07-22

共1个答案

小编典典

减速器在switch语句中没有默认操作。这就是为什么即使您在化简器参数中提到了初始状态,但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;

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

2020-07-22