javascript - 由于状态突变，Reducer中未捕获的Redux Action

您可以假设以下变量：

click = true

categories = [
  {title: "all", onClick: false},
  {title: "video", onClick: false},
  {title: "gif", onClick: false},
  {title: "website", onClick: false}
]

finalCategories = [
  {title: "all", onClick: true},
  {title: "video", onClick: true},
  {title: "gif", onClick: true},
  {title: "website", onClick: true}
]

我在这里有一组redux动作：

import * as actionTypes from './actionTypes';
import {beginAjaxCall, ajaxCallError} from './ajaxStatusActions';
import * as Utils from './utils/dashboardActionsUtils';

export function updateCategoriesSuccess(categories) {
  return {type: actionTypes.UPDATE_CATEGORIES_SUCCESS, categories};
}

export function categoryAllClick(categories, click) {
  return function(dispatch) {
    dispatch(beginAjaxCall());
    const finalCategories = Utils.updateMenuOnAll(categories, click);
    dispatch(updateCategoriesSuccess(finalCategories));
  };
}

哪里：

export function updateMenuOnAll(menu, click) {
  const finalMenu = Object.assign([], menu);
  if (click) {
    finalMenu.map(item => item.onClick = true);
  } else {
    finalMenu.map(item => item.onClick = false);
  }
  return finalMenu;
}

但是，当我调用categoryAllClick(categories, click)时，actionTypes.UPDATE_CATEGORIES_SUCCESS不会被我的减速器捕获：

import * as actionTypes from '../actions/actionTypes';
import initialState from './initialState';

export default function dashboardReducer(state = initialState.dashboard, action) {
  switch(action.type) {
    case actionTypes.UPDATE_CATEGORIES_SUCCESS:
      return Object.assign({}, state, {categories: action.categories});

    default:
      return state;
  }
}

我假设这是因为当我尝试执行此操作时，收到错误消息：

2 Uncaught Error: A state mutation was detected between dispatches, in the path `dashboard.categories.0.onClick`. This may cause incorrect behavior. (http://redux.js.org/docs/Troubleshooting.html#never-mutate-reducer-arguments)

我在updateMenuOnAll导出的函数中是否做错了导致这种状态突变的事情？我认为使用Object.assign()可以避免此问题。谢谢！

编辑

单击相应的div时，以下react组件是调用categoryAllClick的组件：

import React from 'react';
import PropTypes from 'prop-types';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import * as dashboardActions from '../../../../../actions/dashboardActions';

class CheckboxItem extends React.Component {
  constructor() {
    super();
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    const {menu, title, type, categoryAllClick, tagAllClick, actions} = this.props;
    if (type === "categories") {
      if (title === "all") {
        actions.categoryAllClick(menu, !categoryAllClick);
      } else {
        actions.updateCategories(title, menu);
      }
    } else if (type === "tags") {
      if (title === "all") {
        actions.tagAllClick(menu, !tagAllClick);
      } else {
        actions.updateTags(title, menu);
      }
    }
  }

  render() {
    return (
      <div className="div-common-menu-item" onClick={this.handleClick}>
        // Child componenets here
      </div>
    );
  }
}

CheckboxItem.propTypes = {
  menu: PropTypes.array.isRequired,
  title: PropTypes.string.isRequired,
  type: PropTypes.string.isRequired,
  categories: PropTypes.array.isRequired,
  tags: PropTypes.array.isRequired,
  categoryAllClick: PropTypes.bool.isRequired,
  tagAllClick: PropTypes.bool.isRequired,
  actions: PropTypes.object.isRequired
};

function mapStateToProps(state) {
  return {
    categories: state.dashboard.categories,
    tags: state.dashboard.tags,
    categoryAllClick: state.dashboard.categoryAllClick,
    tagAllClick: state.dashboard.tagAllClick
  };
}

function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators(dashboardActions, dispatch)
  };
}

const connectedStateAndProps = connect(mapStateToProps, mapDispatchToProps);
export default connectedStateAndProps(CheckboxItem);

最佳答案

您的updateMenuOnAll函数有以下三种错误：


当您遍历项目时，它会对其进行变异
map()返回一个新数组，但是您忽略了该返回值
使用Object.assign()不是复制数组的正确方法。


更好的方法是：

export function updateMenuOnAll(menu, click) {
  const newOnClick = !!click;

  const finalMenu = menu.map(item => ({...item, onClick : newOnClick}));
  return finalMenu;
}

关于javascript - 由于状态突变，Reducer中未捕获的Redux Action ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50281371/