如何在 redux 存储中保存数组对象数据

Posted 2023-02-22

【中文标题】如何在 redux 存储中保存数组对象数据

【英文标题】：how to save array object data in redux store

【发布时间】：2020-05-12 17:25:27

【问题描述】：

我尝试在我的 react native 应用程序的 redux 存储中存储多个对象，但只有一个对象被保存， 我是 redux 的新手，我尝试了很多在 *** 上找到的解决方案，但没有一个有效：/

结果我在我的商店：

"hives": "hive_id": 12944, "hive_name": null 

我想要的结果（或类似的）：

 "hives": [
1: "hive_id": 123, "hive_name": "HelloHive", 
2: "hive_id": 12944, "hive_name": null] 

商店：

const middleware = [thunk]
export const store = createStore(persistedReducer, applyMiddleware(...middleware));
export const persistor = persistStore(store);

减速器：

const INIT_STATE = 
  hives: [],


const hiveReducer = (state = INIT_STATE, action) => 
  switch (action.type) 
case SET_HIVES:
      return 
        ...state,
        hives: action.payload,
      ;
    [...]

动作创建者：

export const setHives = hives => 
  return 
    type: SET_HIVES,
    payload: hives,
  ;
;

动作：

export const getHives = () => 
  return dispatch => 
    axios.get(GET_HIVE_URL, HEADER).then(res => 
      const status = res.data.status;
      const hives = res.data.hives;

      if (status == 'hiveFound') 
        for (let i = 0; i < hives.length; i++) 
          console.log(hives[i]);
          dispatch(setHives(hives[i]));
        
      
    );
  ;
;

我的 API 发给我：

 "hives": [
        
            "hive_id": 123,
            "hive_name": "HelloHive"
        ,
        
            "hive_id": 12944,
            "hive_name": null
        
    ]

和 console.log(hives[i]) 返回：

 LOG  "hive_id": 123, "hive_name": "HelloHive"
 LOG  "hive_id": 12944, "hive_name": null

谢谢你

【问题讨论】：

for 循环中不必要的调度 - 调度所有配置单元

hives: [...state.hives, action.payload], 不应该吗？

【参考方案1】：

在你的减速器中试试这个：

case SET_HIVES:
      return 
        ...state,
        hives: [...state.hives,action.payload],
      ;
    [...]

希望对您有所帮助。如有疑问，请随意

【讨论】：

这不会解决问题，因为代码中的错误发生得更早，在行动中 hives[i] 每次都被一一分配。这就是为什么他最终每次都拥有一张唱片

谢谢，我试了一下，控制台返回：``` 可能未处理的 Promise Rejection (id: 0): TypeError: Invalid attempt to spread non-iterable instance ``` and my store ` "hives" : []`

【参考方案2】：

首先，在你的 reducer 中，你不需要使用 ...state 扩展运算符，因为 hives 似乎是你所在州的唯一一个变量。其次，您正在迭代 hives 的每个元素，因此您正在逐​​个输入它们，从而覆盖前一个元素。您没有将其附加到数组中。以下是您需要更改操作的方法：

export const getHives = () => 
  return dispatch => 
    axios.get(GET_HIVE_URL, HEADER).then(res => 
      const status = res.data.status;
      const hives = res.data.hives;

      if (status == 'hiveFound') 
          dispatch(setHives(hives));
      
    );
  ;
;

这样它将整个数组写入redux中的那个变量。

【讨论】：

我试试，效果更好！现在我的商店返回 ` "hives": [[Object], [Object]], `

耶！凉爽的！很高兴它有帮助

【参考方案3】：

您可以在下面尝试此操作，以便存储整个数组。假设你已经有了这些动作。

初始状态

export default 
hives:[]

HivesReducer

export default function counter(state = initialState.hives, action) 
  switch (action.type) 
    case Types.SET_HIVES:
      return [...state, action.payload];
    default:
      return state;