时间戳

首页 > 解决方案 > 在 POST/PUT/DELETE API 调用后更新 redux 存储中数据的最佳方法是什么

reactjs - 在 POST/PUT/DELETE API 调用后更新 redux 存储中数据的最佳方法是什么

问题描述

您建议的可扩展方法是什么？为什么？

选项 1：进行 API 调用以修改后端数据并在 redux 中手动更新存储

// saga
export function * updateList(action){
  yield call list endpoint
  yield put(updateListCompleted(action))
}

// action
updateListCompleted (action){
  return {
    type: 'UPDATE_LIST_COMPLETED',
    action,
  }
}

// reducer
function reducer(state = initialState, action) {
  switch (action.type) {
    case actionTypes.UPDATE_LIST_COMPLETED:
      return {...state, {...action.listData})
}

选项 2：进行 API 调用以修改后端数据并进行后续 GET 调用以更新存储

 // saga to update backend list
    export function * updateList(action){
      yield call update list endpoint
      yield put(getListAction(action))
    }

  // action
    getListAction (action){
      return {
        type: 'GET_LIST',
        action,
      }
    }
    ...
    // this is triggered by the GET_LIST action
    export function * getList(action){
      yield call get list endpoint
      yield put(getListCompleted(responseFromListEndpoint))
    }

    // action
    getListCompleted (response){
      return {
        type: 'GET_LIST_COMPLETED',
        response,
      }
    }

    // reducer
    function reducer(state = initialState, action) {
      switch (action.type) {
        case actionTypes.GET_LIST_COMPLETED:
          return {...state, {...action.response})
    }

标签： reactjsreact-redux

解决方案

Option 1将是通常的选择，除非有一些信息只能通过这些额外的GET请求访问。

推荐阅读