Question

我正在尝试将 Redux 集成到一个已经可以运行的项目中。我已经使用多个切片配置了 Redux 存储，这是造成麻烦的一个：

const initialCategoriesState = [];

const categoriesSlice = createSlice({
  name: "categories",
  initialState: initialCategoriesState,
  reducers: {
    setCategories(state, action) {
      state = action.payload;   
    },
  },
});

在我的组件中，我使用 useSelector 来访问状态：

const categories = useSelector(state => state.categories);

为了更新它，我派发了一个动作，相应地与切片中声明的动作一致：

const fetchedCategories = await fetchData(urlCategories, CATEGORIES);
dispatch(categoriesActions.setCategories(fetchedCategories));

但是一旦我运行代码，categories 常量就永远不会更新。由于我不确定该操作是否正在获取数据，因此我尝试将减速器内的状态 console.log 如下：

reducers: {
  setCategories(state, action) {
    console.log("state before", state);
    state = action.payload;
    console.log("state after", state);   
  },
},

状态确实在变化，但不是 categories 常量中提取的状态。

这里有我遗漏的东西吗？

Answer 1

几个月前我遇到了同样的问题，并通过这种方式解决了它。但是，我可能也错过了一些东西。

请为您的初始状态尝试此操作：

const initialCategoriesState = { categories: [] };

然后在你的减速器中：

state.categories = action.payload;

Answer 2

我发现 Redux Toolkit 的一个很酷的地方是它的实体适配器，它可以安全地初始化您的状态，同时提供用于更新您的状态的辅助函数。他们（合理地）假设您的切片将具有集合，并且可能是与切片同名的主要事物集合。 createEntityAdapter() 允许您这样做：

const categoriesAdapter = createEntityAdapter()

// name the below "initialState" exactly
const initialState = categoriesAdapter.getInitialState({
    // this will, by default, get you an `entities{}` and `ids[]` representing your categories
    // you can add any additional properties you want in state here as well
})

然后，当您想要更新状态时，您可以在减速器中执行以下操作：

reducers: {
  setCategories(state, action) {
    categoriesReducer.setAll(state, action.payload)
    // this will update both entities{} and ids[] appropriately
  },
},

为什么我不能使用 Redux 更新状态？

2 个答案: