Redux - ReactJS 应用程序不会重新渲染（尽管 JSON.parse 用于新对象）答案

【问题标题】：Redux - ReactJS app does not rerender (although JSON.parse for new object)Redux - ReactJS 应用程序不会重新渲染（尽管 JSON.parse 用于新对象）
【发布时间】：2020-09-13 02:12:19
【问题描述】：

我有一个带有过滤器的 ReactJS 应用程序，并使用 RESET 函数来重置这些过滤器。

我也使用：Redux、Redux Persist 和 React-router-dom。

如果我看一下 Redux Devtools，它似乎可以工作。但应用无法正确重新渲染，需要刷新 (f5)。

我想要实现的目标：用 initialState 对象覆盖已配置的Filters 对象。

这是我的根减速器：

const rootReducer = (state = initialState, action) => {
  let newState = state;
  if (action.type === 'RESET_FILTERS') {
    storage.removeItem('persist:configuredFilters');
    // eslint-disable-next-line no-param-reassign
    newState = { ...newState,
      configuredFilters: JSON.parse(JSON.stringify(initialState.configuredFilters))
    };
  }
  return appReducer(newState, action);
};

这是差异（我之前配置了两个国家）：

这里是对象（页面加载时的初始状态）：

组件是用这个组件创建的：

/* eslint-disable max-len */
import React from 'react';
import { useSelector, shallowEqual, useDispatch } from 'react-redux';
import { Form, Select } from 'antd';
import PropTypes from 'prop-types';
import RenderTag from './RenderTag';
import * as Action from '../../store/configuredFilters/actions';

const propTypes = {
  data: PropTypes.shape({
    name: PropTypes.string.isRequired,
    label: PropTypes.string,
    placeholder: PropTypes.string,
    options: PropTypes.arrayOf(PropTypes.shape({})),
  }).isRequired,
};


const { Option } = Select;


const useData = () => {
  const dataFromRdx = useSelector(
    (state) => ({
      configuredFilters: state.configuredFilters,
    }),
    shallowEqual
  );
  return { dataFromRdx };
};

const FixedListSelect = ({
  data: {
    name, label, placeholder, options,
  },
}) => {
  const { dataFromRdx } = useData();

  const {
    configuredFilters: {
      data: {
        search: searchTerm,
      },
    },
  } = dataFromRdx;


  const dispatch = useDispatch();
  const dispatchFns = {
    setConfiguredFilters: (key, value) => {
      dispatch(Action.setConfiguredFilters(key, value));
    },
  };

  const setRdxVal = (id, currVal) => {
    dispatchFns.setConfiguredFilters(id, currVal);
  };

  const isFullTextSearchMode = (searchTerm && searchTerm.length);
  return (
    <Form.Item
      name={name}
      label={label}
      fieldKey={name}
    >
      <Select
        allowClear
        disabled={isFullTextSearchMode}
        showSearch
        tagRender={RenderTag}
        mode="multiple"
        placeholder={placeholder}
        optionFilterProp="children"
        filterOption={(input, option) => option.children.toLowerCase().includes(input.toLowerCase())}
        onChange={(currVal) => { setRdxVal(name, currVal); }}
      >
        {(options || []).map((el) => <Option data-filterid={el.val} key={el.val} value={el.val}>{el.label}</Option>)}
      </Select>
    </Form.Item>
  );
};
FixedListSelect.propTypes = propTypes;
export default FixedListSelect;

对该组件的调用：

<FixedListSelect data={{
          name: 'companies',
          label: t('companies'),
          placeholder: t('companies-placeholder'),
          options: companies,
        }}
        />

有人可以帮忙或至少给个提示吗？

【问题讨论】：

reducer 不会触发组件的新渲染，它只会负责更新状态。你能告诉我们应该重新渲染的组件吗？
你能不能也显示appReducer
这可能与实际问题完全无关 - 但您的 rootReducer 不是一个纯函数（它改变了一个名为 storage 的外部变量 - 我猜这是本地存储？），还有这个是你永远不应该做的事情。 reducer 应该采取行动和当前状态并返回新状态，没有副作用。
您似乎正在从商店中选择具有深度状态的对象。 useSelector 的第二个参数是默认的 deepEqual，你有没有试过不用 shallowEqual 替换它？ state.configuredFilters 很浅 state.configuredFilters.data.contries 例如很深，因此不会导致重新渲染，除非您使用 deepEqual。
你在你的 reducer 中处于最明确的变异状态。这会导致您的应用不响应状态更新

标签： javascript reactjs reducers

【解决方案1】：

在 ReactJS 中你不能直接改变状态。在 Redux 中也是如此。您必须复制现有信息。如果发现差异，Redux 会将当前树与新信息进行比较，然后更新存储并呈现新结果。如果直接变异，您将始终刷新以使其正常工作。

更多信息

Immutable Update Patterns

【讨论】：