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

大佬教程收集整理的这篇文章主要介绍了如何将应用状态从 React Context 迁移到 Redux Tool Kit？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

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

我正在努力实现的目标：@H_450_5@

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

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

    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 方法提取的另一个参数 (@H_689_15@map())。 在 JsX 中的实际组件中，它看起来和唤起如下：@H_450_5@

<motion.button 
    classname="underline cursor-pointer Font-extralight"
    onClick={() => {removeFromcheckout(checkout.ID,item.ID)}}
>

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

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

    const {togglE} = useSELEctor((statE) => state.togglE);
    const {checkout} = useSELEctor((statE) => state.checkout);

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

感谢您的关注，希望有人能对此有所了解。@H_450_5@

解决方法

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"))

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

大佬总结

以上是大佬教程为你收集整理的如何将应用状态从 React Context 迁移到 Redux Tool Kit？全部内容，希望文章能够帮你解决如何将应用状态从 React Context 迁移到 Redux Tool Kit？所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。