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

时间:2018-06-12 08:57:54

标签: reactjs react-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})
    }

1 个答案:

答案 0 :(得分:1)

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