在 Redux 中映射和更改状态

Question

我有一个像下面这样的对象：

const initialState = {
  filters: {
    categories: [
      { text: "a", checked: true },
      { text: "b", checked: false },
      { text: "c", checked: false },
    ],
    brands: [
      { text: "d", checked: false },
      { text: "e", checked: true },
      { text: "f", checked: false },
    ],
    types: [
      { text: "g", checked: false },
      { text: "h", checked: true },
    ],
  },
};

我需要在点击时将所有选中的字段更改为 'false'。我正在使用 redux，这是我的初始状态。下面是我的功能，但它不能正常工作。它说“state.filters.map 不是函数”。

const filtersReducer = (state = initialState, action) => {
  switch (action.type) {
    case "RESET_ALL_STATES":
      return {
        ...state,
        filters: {
          ...state.filters,
          ...state.filters.map((filter) =>
            filter.map((option) =>
              option.checked === true ? { ...option, checked: false } : option
            )
          ),
        },
      };
    default:
      return state;
  }
};

Answer 1

以下解决方案使用 Object.entries 遍历 filter 对象内的所有 key/value 对，将每个数组的元素值重置为 checked: false.

const state={filters:{categories:[{text:"a",checked:!0},{text:"b",checked:!1},{text:"c",checked:!1}],brands:[{text:"d",checked:!1},{text:"e",checked:!0},{text:"f",checked:!1}],types:[{text:"g",checked:!1},{text:"h",checked:!0}]}};

const resetFilters = Object.entries(state.filters).reduce(
  (acc, [key, arr]) => {
    acc[key] = arr.map((el) => ({ ...el, checked: false }));
    return acc;
  },
  {}
);

console.log(resetFilters);

在你的减速器的上下文中，这可能看起来像：

const filtersReducer = (state = initialState, action) => {
  switch (action.type) {
    case "RESET_ALL_STATES":
      return {
        ...state,
        filters: Object.entries(state.filters).reduce(
          (acc, [key, arr]) => {
            acc[key] = arr.map((el) => ({ ...el, checked: false }));
            return acc;
          },
          {}
        ),
      };
    default:
      return state;
  }
};

在 Redux 中映射和更改状态

Maping and changing states in Redux

javascript

mapping

reactjs

redux