如何將應用狀態從 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"}))

因為它只是開箱即用，沒有准備符號，並且無論如何都會使您的代碼更具可讀性。