React Native Redux - 从预填充数据中分配状态属性

Question

我是 Redux 和 React Native 的新手，如果我犯了明显的错误，我深表歉意。

在了解我遇到的错误之前，这里有一些背景知识。

我有一个状态和一个数据库（SQLite）。我有一个实例，我需要擦除状态并从数据库中重新填充状态。我已经收集并解析了数据库中的数据，只需将其添加到状态中即可。

细节：我在数据库中有一个对象列表（我们会说汽车），每个对象都有自己的属性。我创建了一个汽车清单并通过了它。收到后，我创建了一个“假状态”（它只是空的初始状态）并通过添加汽车列表来改变它，因为我知道你不应该改变实际状态。

然后我尝试使用 new cars 属性返回状态。

我收到一条错误消息：TypeError：assign 的来源之一在原型链上有一个可枚举的键。您是否尝试分配原型属性？我们不允许这样做，因为这是我们不支持的极端情况。此错误是性能优化，不符合规范。

我是否理解这是说我不能像我想要的那样分配一个 redux 状态属性？

const initialState = {
  cars: [],
  selectedDevice: null,
};

const getNewCarList = async (previousState) => {
  const carList = await DBProvider.callQueryDB();

  const carListLength = carList.length;
  let newState = previousState;

  for (let i = 0; i < carListLength; i += 1) {
    newState = {
      ...newState,
      cars: newState.car.concat({
        carName: carList[i].carName,
        carID: carList[i].carID,
      }),
    };
  }
  return newState;
};


const refreshStore = async (state = initialState, action) => {
  switch (action.type) {
    case REFRESH_STORE: {
      const newCarState = await getNewCarList(initialState).then(newState => newState);

      return {
        ...state,
        car: newCarState.cars,
      };
    }

    default:
      return state;
  }
};

Answer 1

搜索该错误消息会出现this SO question，它链接到https://github.com/facebook/react-native/issues/16814。看起来这是一个特定于 React Native 的问题，它结合了您的 API 调用和扩展运算符的使用。

除此之外，您的代码还有几个主要问题：

• 你在 reducer 中进行异步调用，你不应该这样做
• 可以简化 API 响应中列表的处理

我建议您按照以下思路修改您的逻辑：

// Handle the request in a thunk function
function getNewCarList() {
     return async (dispatch) => {
         const carList = await DBProvider.callQueryDB();

         // dispatch an action containing the cars array
         dispatch({
             type : "REFRESH_STORE",
             payload : {
                 cars : carList
             }
         });
     }
}

function carsReducer(state = initialState, action) {
    switch(action.type) {
        case "REFRESH_STORE" : {
            // the reducer just returns a new state value with the new array
            return {
                ...state,
                cars : action.payload.cars
            }
        }
        default : return state;
    } 
}