在 mapStateToProps 中未定义 Redux 状态 [英] Redux state is undefined in mapStateToProps

问题描述

我目前正在关注本教程.我在以下代码中遇到了一个涉及 mapStateToProps 的问题:

从'react'导入React；从'./voting'导入投票；从'react-redux'导入{connect}；const mapStateToProps = (状态) =>{返回 {对: state.getIn(['vote','pair']),获胜者:state.get('获胜者')};}const VotingContainer = connect(mapStateToProps)(Voting);导出默认 VotingContainer；

这是导入的投票组件:

从'react'导入React；从'./Vote'导入投票；从 './winner' 导入获胜者；const Voting = ({pair,vote,hasVoted,winner}) =><div>{赢家?<获胜者获胜者={获胜者}/>:<Vote pair={pair} vote={vote} hasVoted={hasVoted}/>}

导出默认投票；

它应该从 pair 道具渲染两个按钮.vote 道具是一个将在点击时执行的函数，hasVoted 在 true 时禁用按钮，而获胜者仅呈现如图所示的获胜者组件.

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

地图({投票:{pair:List.of('电影A','电影B')}});

相反，我收到一条错误消息，指出 state.getIn 行中的 state 未定义.

设置状态在索引中的代码:

const store = createStore(reducer);const socket = io(document.location.protocol + '//' + document.location.hostname + ':8090');socket.on('state', state => store.dispatch({类型:'SET_STATE'，状态}));

我在设置后记录了 store.getState() 并且它是预期的但是 undefined 在 mapStateToProps 中.我还在上面的上下文中记录了状态变量，它也符合预期.

我也正常设置了状态，它出人意料地有效！:

store.dispatch({类型:'SET_STATE'，状态: {投票:{对:['电影 A'，'电影 B']}}});

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

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

从'react'导入React；从不可变"导入 {Map, fromJS}；const reducer = (state = Map(), action) =>{开关(动作.类型){案例SET_STATE":返回 state.merge(action.state);}}导出默认减速器；

我做错了什么?

我意识到在 store.dispatch() 之后没有调用 mapStateToProps.我浏览了 docs 的可能原因 mapStateToProps 不是被调用，但它不是其中之一.

解决方案

您的 reducer 在 switch 语句中没有默认操作.这就是为什么即使您在 reducer params 中提到了初始状态， undefined 也会作为 store 初始状态返回

从'react'导入React；从不可变"导入 {Map,fromJS}；const reducer = (state = Map() ,action) =>{开关(动作.类型){case 'SET_STATE': 返回 state.merge(action.state);默认:返回状态；}}导出默认减速器；

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

I am currently following this tutorial. I've hit a bit of a snag involving mapStateToProps in the following code:

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;

Here is the Voting component that's imported:

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;

It is supposed to render two buttons from the pair prop. The vote prop is a function that will be executed on click, hasVoted disables buttons when true and winner only renders the winner component as shown.

The state is expected to be an immutableJS map that looks like this:

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

Instead I am getting an error saying that state is undefined in the state.getIn line.

The code setting the state is in index:

const store = createStore(reducer);

const socket = io(document.location.protocol + '//' + document.location.hostname + ':8090');
socket.on('state', state => store.dispatch({
  type: 'SET_STATE',
  state
}));

I have logged store.getState()after setting and it is as expected but undefined in mapStateToProps. I also logged the state variable in above context and it's also as expected.

I also set the state normally and it surprisingly works!:

store.dispatch({
  type: 'SET_STATE',
  state: {
    vote: {
      pair: ['Movie A', 'Movie B']
    }
  }
});

The value of state above is exactly what is received from the server

Lastly here's what my reducer looks like:

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;

What am I doing wrong?

EDIT: I realised that mapStateToProps is not being called after the store.dispatch(). I went through the docs for the possible reasons mapStateToProps is not being called and it's not one of them.

解决方案

You reducer doesn't have a default action in switch statement. Which is why even though you mentioned the initial state in reducer params, undefined is returned as store initial 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);
    default:
      return state;
  }
}

export default reducer;

Adding the default statement will fix the issue :)

这篇关于在 mapStateToProps 中未定义 Redux 状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！