Question

嘿，我的badgeNumber不断返回为undefined，我真的不明白为什么。感谢您的帮助。

我的减速器：

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
  };
};

另外要小心

default:
  return initialState;

我想应该是

default:
  return startMenuState;

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

Answer 2

结合使用reducer时，您可以在应用程序上创建多个状态。

您的mapStateToProps函数应如下所示：

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

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

只需像这样使用它：

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

未定义mapStateToProps React Redux

2 个答案: