未定义的 mapStateToProps React Redux答案

【问题标题】：Undefined mapStateToProps React Redux未定义的 mapStateToProps React Redux
【发布时间】：2019-01-15 19:19:48
【问题描述】：

嘿，我的 badgeNumber 经常以未定义的形式返回，我真的不明白为什么。感谢您的帮助。

我的减速机：

import {OPEN_DROPDOWN, ADD_TASK, REMOVE_TASK, CLOSE_DROPDOWN} from '../types/MenuTypes';

const initialState = {
  badgeNumber: 6,
  drop: false,
  tasks: [] 
};

export function reducerMenuEntry(startMenuState = initialState, action) {
  switch (action.type) {
    case OPEN_DROPDOWN:
      return Object.assign({}, startMenuState, {
        ...startMenuState,
        drop: true
      });

    case CLOSE_DROPDOWN:
      return Object.assign({}, startMenuState, {
        ...startMenuState,
        drop: false
      });

    case REMOVE_TASK:
    case ADD_TASK:
      return Object.assign({}, startMenuState, {
        ...startMenuState,
        badgeNumber: action.badgeNumber,
        tasks: action.tasks
      });

    default:
      return initialState;
  }
}

以及我尝试显示数据的组件：

import { connect } from 'react-redux';

class ToolsBar extends Component {
  render() {
    const {badgeNumber} = this.props;
    alert(badgeNumber);
    return (
      <Toolbar {...this.props.getActionsProps({})}>
        <ToolbarButton>
          <Badge badgeContent={badgeNumber} />
        </ToolbarButton>
      </Toolbar>
    );
  };
};

const mapStateToProps = state => {
  return {
    drop: state.drop,
    badgeNumber: state.badgeNumber
  };
};

export default connect(mapStateToProps)(ToolsBar);

商店：

import { createStore, applyMiddleware } from 'redux';
import RootReducer from './reducers/RootReducer';
import thunk from 'redux-thunk';

export default () => {
  return createStore(RootReducer, applyMiddleware(thunk));
};

操作，但目前尚未完全实施。我想在通过操作修改它们之前显示静态值：

import { OPEN_DROPDOWN, ADD_TASK, REMOVE_TASK, CLOSE_DROPDOWN} from "../types/MenuTypes";

export const open = () => {
  return { type: OPEN_DROPDOWN }
};

export const close = () => {
  return { type: CLOSE_DROPDOWN }
};

export function addTask(tasks, badgeNum){
  badgeNum++;
  return { type:ADD_TASK, tasks, badgeNum}
};

export function removeTask (tasks, badgeNum){
  badgeNum--;
  return { type: REMOVE_TASK, tasks, badgeNum}
};

组合减速机：

import {combineReducers} from 'redux';
import {reducerUpdatePageEntry} from './UpdatePageReducer';
import {reducerSearchPageEntry} from './SearchPageReducer';
import {reducerSharedEntry} from './SharedReducer';
import {reducerUploadPageEntry} from './UploadPageReducer';
import {reducerMenuEntry} from './MenuReducer';

export default combineReducers({
  updateStates: reducerUpdatePageEntry,
  displaySearchStates: reducerSearchPageEntry,
  sharedStates: reducerSharedEntry,
  uploadStates: reducerUploadPageEntry,
  menuStates: reducerMenuEntry
});

【问题讨论】：

该道具是通过异步操作从某个地方传来的吗？
对不起我对Redux不好我以为他们是通过商店传递的
好的，但是这个badgeNumber 值是从哪里来的？它在您的代码中是静态的还是来自 API？最好添加您的动作创建者代码。你有 thunk 中间件，所以可能有一个异步作业。
目前是静态的，我将更新评论，以便我也可以显示操作。
另外，请您的减速机。因为我们现在看不到你的state 是什么样子的。

标签： reactjs react-redux undefined redux-thunk reducers

【解决方案1】：

当您组合 reducer 时，您会在应用程序上创建多个状态。

您的 mapStateToProps 函数应如下所示：

const mapStateToProps = state => {
  return {
    drop: state.menuStates.drop,
    badgeNumber: state.menuStates.badgeNumber
  };
};

还有一点：如果你已经在使用 object spread，你就不需要 Object.assign

像这样使用它：

return {
    ...startMenuState,
    drop: false
  });

【讨论】：

【解决方案2】：

您在 mapStateToProps 中指定了错误的路径：

const mapStateToProps = state => {
  return {
    drop: state.menuStates.drop,
    badgeNumber: state.menuStates.badgeNumber
  };
};

另外要小心

default:
  return initialState;

应该是这样的

default:
  return startMenuState;

因为如果您返回 initialState，则状态将随着每个未处理的操作而重置。

【讨论】：