使用 redux-persist 的对象的 React-Native Persist 对象答案

【问题标题】：React-Native Persist object of objects with redux-persist使用 redux-persist 的对象的 React-Native Persist 对象
【发布时间】：2018-11-28 17:39:13
【问题描述】：

我在 redux 中有这个状态：

draft: {
    temporary: { clientId: null, shoppingCart: [] },
},

在我的购物车中，我使用 react-addons-update 推送一些对象：

const newState = { ...state };
let cart = newState.draft.temporary.shoppingCart;
cart = update(cart, { $push: [{ id: 1, quantity: 3 }] });
newState.draft.temporary.shoppingCart = cart;
return newState;

而我在应用中的 newState 是：

draft: {
        temporary: { clientId: null, shoppingCart: [
            {id: 1, qnt: 3},
        ]},
    },

我将我的 products 减速器配置为：

products: persistReducer(products: {
    key: 'products',
    storage,
    whitelist: ['draft'],   
}, products),

但是一旦重新加载应用程序，我的商店就不会持久化。

更新：

有效的示例解决方案：

newState.draft = { ...newState.draft, temporary: { ...newState.draft.temporary, shoppingCart: [ ...newState.draft.temporary.shoppingCart, { id: 1, qnt: 3 } ]}};

没有 react-addons-update 的解决方案不起作用：

newState.draft.temporary.shoppingCart = [ ...newState.draft.temporary.shoppingCart, { id: payload.id, quantity: 1 } ];

有“更清洁的解决方案”吗？？

【问题讨论】：

标签： react-native redux redux-persist

【解决方案1】：

这是一个适用于您的案例的示例：

import { persistCombineReducers, persistReducer } from 'redux-persist';

const draftPersistConfig = { key: 'draft', storage: AsyncStorage };

const reducers = { products: persistReducer(draftPersistConfig, products), // ...other reducers if you have any }

const persistConfig = { key: 'root', storage: AsyncStorage, debug: true, whitelist: ['draft'] };

persistCombineReducers(persistConfig, reducers); 应该返回您可以用来创建商店的 rootReducer

【讨论】：

谢谢，但这个解决方案对我不起作用。以某种方式更改对象子项的问题未通知 redux 持久性。示例：这是有效的 -> newState.draft = { ...newState.draft,temporary: { ...newState.draft.temporary, shoppingCart: [ ...newState.draft.temporary.shoppingCart, { id: 1, qnt: 3 } ]}};这不起作用 -> newState.draft.temporary.shoppingCart = [ ...newState.draft.temporary.shoppingCart, { id: payload.id, quantity: 1 } ];我需要找到一个更清洁的解决方案；）
我在主要问题中添加了示例:)
我明白了，更新嵌套状态可能很棘手，并且示例不起作用的问题是因为您正在改变状态而不是创建新状态。因此，如果您正在寻找一种更新 redux 状态的更清洁方法，这里有一些很好的解释 stackoverflow.com/questions/35592078/…

【解决方案2】：

我使用的最终解决方案是更改减速器：

  const newDraft = { ...state.draft };
  let cart = state.draft.temporary.shoppingCart;

  const index = _.findIndex(cart, { id: payload.id });

  if (index === -1) cart = update(cart, { $push: [{ id: payload.id, quantity: 1 }] });
  else cart = update(cart, { [index]: { quantity: { $set: cart[index].quantity + 1 } } });

  newDraft.temporary.shoppingCart = cart;

  return { ...state, draft: { ...newDraft } };

【讨论】：