Question

我试图将一个元素添加到一个名为allLogbooks的数组中。此数组包含名为Logbook的对象。我的问题是，我如何适应代码，以便将新元素添加到我的reducer中声明的数组？这是我的初始状态：

const initialState = {
  isFetching: false,
  error: undefined,
  isRegistered: false,
  isUpdated: false,
  hasChecked: false,
  isError: false,
  registerStepOne: true,
  registerStepTwo: false,
  registerStepThree: false,
  registerStepFour: false,
  logbooks: undefined,
  allLogbooks: [],
  userInfo: undefined,
  logbookAddSuccess: false,
  newLogbook: undefined,
  graphFilter: 1
}

这是我的减速机：

case ADD_LOGBOOK_SUCCESS:
    allLogbooks.push(action.newLogbook);
      return {
        ...state,
        isFetching: false,
        logbookAddSuccess: true,
        isUpdated: true,
        isError: false,
      }

这是我的行动：

function addLogbookSuccess(newLogbook) {
    return {
        type: ADD_LOGBOOK_SUCCESS
        }
}

然后我对一个nodejs服务器进行POST调用，如果成功，它将响应一条消息，以及刚刚创建的日志。以下数据是它返回的内容：

{
    "success": true,
    "logbook": {
        "created_by": "",
        "created_at": "",
        "_id": "",
        "__v": 0
    }
}

然后我在API调用中调度，如下：

.then(data => data.json())
            .then(json => {
                Keyboard.dismiss();
                dispatch(addLogbookSuccess(json.logbook));

            })
            .catch(err => dispatch(addLogbookFailed(err)))

我通过使用AsyncStorage在国外访问数组来取代我的所有观点，但我知道这是错误的。

Answer 1

我正在努力理解你的问题，所以我已经尽力了。如果我的答案完全没有，请告诉我。

你的减速机：

case ADD_LOGBOOK_SUCCESS: {
  const newLogbook = action.payload;
  return {
    ...state,
    isFetching: false,
    logbookAddSuccess: true,
    isUpdated: true,
    isError: false,
    allLogBooks: [
      ...state.allLogBooks,
      newLogbook
    ]
  }
}

你的行动：

function addLogbookSuccess(newLogbook) {
    return {
      type: ADD_LOGBOOK_SUCCESS,
      payload: newLogbook
    }
}

在Redux中将对象添加到数组？

1 个答案: