redux toolkit 的 preloadedState 和 createSlice 如何正确搭配使用？

Question

我正在尝试迁移到 redux 工具包，但遇到了一个问题。

这是一个简单的计数器切片示例。

import { createSlice } from "@reduxjs/toolkit";

const initialState = {
  value: 0,
};

export const counterSlice = createSlice({
  name: "counter",
  initialState,
  reducers: {
    increment: (state) => {
      state.value += 1;
    },
    decrement: (state) => {
      state.value -= 1;
    },
  },
});

export const { increment, decrement } = counterSlice.actions;
export default counterSlice.reducer;

这是一个使用 configureStore 创建的商店。

import { configureStore } from "@reduxjs/toolkit";
import counterReducer from "./slice";

export const store = configureStore({
  reducer: {
    counter: counterReducer,
    // later, many other reducers will be added here.
  },
});

还有问题。

但是如果引入preloadedState，就会出现问题

const store = configureStore({
    reducer: counterReducer,
    preloadedState: {
      counter: {
         value: 10
      }
    },
  });

如果我像下面这样记录商店的状态，它会按预期记录。

   // without using preloadedState, it results to {counter: {value: 0}}
   console.log(store.getState())
   // with using preloadedState, it results to {counter: {value: 10}}
   console.log(store.getState())

但是在使用 slice reducer 时出现了一个问题，因为 slice reducer 使用它自己的状态。

   ...
     reducers: {
       increment: (state) => {
         state.value += 1;  // not work anymore if using preloadedState. we have to use state.counter.value instead.
       },
       decrement: (state) => {
         state.value -= 1;  // not work anymore if using preloadedState. we have to use state.counter.value instead.
       },
     },
   ...

相反，我们必须使用，

   ...
     reducers: {
       increment: (state) => {
         state.counter.value += 1; 
       },
       decrement: (state) => {
         state.counter.value -= 1;
       },
     },
   ...

那么问题来了，我们是不是要加条件语句，根据是否使用preloadedState，把slice reducer内部的逻辑分开？

如果 slice reducer 在提供 preloadedState 时使用 preloadedState 而不是使用它自己的状态，那就太好了。有没有更好的方法？

谢谢。

Answer 1

如果你查看你的 Redux Devtools 浏览器扩展，你会注意到 - 因为你只有一个 reducer 并且你将那个作为根 reducer 传入，你的状态的形状为

{
  value: 10
},

此时你的正常状态只是没有你的计数器减速器的子项，因为你的整个状态是计数器减速器。

如果你想让你的state有一个合理的结构（并且将来可以使用多个reducer），你必须添加reducer键作为一个对象：

const store = configureStore({
    reducer: {
      counter: counterReducer,
    },
    preloadedState: {
      counter: {
         value: 10
      }
    },
  });

正如您在开发者工具中注意到的那样，现在您的状态结构就是您所期望的 - 预加载状态也将与之匹配。

但请记住，从现在开始，在选择器中您将必须 useSelector(state => state.counter.value)

redux toolkit 的 preloadedState 和 createSlice 如何正确搭配使用？

How to use redux toolkit's preloadedState and createSlice together properly?

redux

redux-toolkit