未定义的 mapStateToProps React Redux

Question

嘿，我的 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
});

Answer 1

当你组合减速器时，你在你的应用程序上创建了多个状态。

您的 mapStateToProps 函数应如下所示：

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

还有一件事：如果您已经在使用对象传播，则不需要 Object.assign

就这样使用：

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

Answer 2

您在 mapStateToProps 中指定的路径有误：

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

另外注意

default:
  return initialState;

我猜应该是

default:
  return startMenuState;

因为如果您 return initialState 每个未处理的操作都会重置状态。

未定义的 mapStateToProps React Redux

Undefined mapStateToProps React Redux

undefined

reducers

reactjs

redux-thunk

react-redux