【问题标题】：how to save array object data in redux store如何在 redux 存储中保存数组对象数据
【发布时间】：2020-05-12 17:25:27
【问题描述】：

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

结果我在我的商店：

"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], 不应该吗？

标签： reactjs react-native redux react-redux redux-thunk

【解决方案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;
  }
}

【讨论】：