由於狀態突變，Reducer中未捕獲的Redux動作

Question

您可以假設以下變量：

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

Answer 1

您的updateMenuOnAll函數有以下三種錯誤：

• 當您遍歷項目時，它會對其進行變異
• map()返回一個新數組，但是您忽略了該返回值
• 使用Object.assign()不是復制數組的正確方法。

更好的方法是：

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

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

Answer 2

我沒有在函數“ Utils.updateMenuOnAll”中看到您的代碼，但是如果它正在更改您的對象類別，則可能會看到該錯誤。

Answer 3

這是因為您不應直接調用categoryAllClick(categories, click) ，而應使用調度程序。 例如，如果您有反應，則使用react-redux “連接”組件（使用import { connect } from 'react-redux'; ）在mapDispatchToProps參數中傳遞函數。

話雖如此，您正確地假設使用Object.assign不會改變您的狀態。

Answer 4

問題是updateMenuOnAll函數。 將其重寫為以下內容可解決此問題。 感謝大家！

export function updateMenuOnAll(menu, click) {
  return menu.map(item => ({title: item.title, onClick: click}));
}