如何将应用状态从 React Context 迁移到 Redux Tool Kit？

Question

我正在努力实现的目标：

我有一个 NextJS + Shopify 店面 API 应用程序。 最初，我为状态管理设置了一个 Context api，但效率不高，因为它重新渲染了其中包含的所有内容。 因此，我将所有状态移至 Redux Toolkit。

Redux 逻辑非常复杂，我还不知道所有的陷阱。 但到目前为止，我遇到了几个问题。 例如，在我旧的 Context API 结构中，我有几个函数接受几个参数：

    const removeFromCheckout = async (checkoutId, lineItemIdsToRemove) => {
        client.checkout.removeLineItems(checkoutId, lineItemIdsToRemove).then((checkout) => {
            setCheckout(checkout);
            localStorage.setItem('checkout', checkoutId);
        });
    }

    const updateLineItem = async (item, quantity) => {
        const checkoutId = checkout.id;
        const lineItemsToUpdate = [
            {id: item.id, quantity: parseInt(quantity, 10)}
        ];
        client.checkout.updateLineItems(checkoutId, lineItemsToUpdate).then((checkout) => {
            setCheckout(checkout);
        });
    }

一个参数 ( checkoutId ) 来自状态，另一个参数 ( lineItemIdsToRemove ) 通过map()方法提取。 在 JSX 中的实际组件内部，它看起来和唤起如下：

<motion.button 
    className="underline cursor-pointer font-extralight"
    onClick={() => {removeFromCheckout(checkout.id, item.id)}}
>

如何在 createSlice({ }) 中声明这种类型的函数？ 因为 createSlice 中的 reducers 可以采用的唯一类型的参数是(state, action) 。 一个文件中是否可以有多个 useSelector() 调用？

我有两个不同的“切片”文件导入到组件中：

    const {toggle} = useSelector((state) => state.toggle);
    const {checkout} = useSelector((state) => state.checkout);

只有 {checkout} 给了我这个错误： TypeError: Cannot destructure property 'checkout' of 'Object(...)(...)' as it is undefined.

感谢您的关注，希望有人能在这方面有所作为。

Answer 1

您可以为此使用准备符号：

const todosSlice = createSlice({
  name: 'todos',
  initialState: [] as Item[],
  reducers: {
    addTodo: {
      reducer: (state, action: PayloadAction<Item>) => {
        state.push(action.payload)
      },
      prepare: (id: number, text: string) => {
        return { payload: { id, text } }
      },
    },
  },
})

dispatch(todosSlice.actions.addTodo(5, "test"))

但是在 99% 的情况下，您可能会继续使用单参数表示法，而只是将对象作为有效负载传递，例如

dispatch(todosSlice.actions.addTodo({ id: 5, text: "test"}))

因为它只是开箱即用，没有准备符号，并且无论如何都会使您的代码更具可读性。