CODEWITHSUNDEEP
reactjsreact-redux
Uyiosa Enabulele
Uyiosa Enabulele

Reputation: 178

What is the best way to update data in a redux store after a POST/PUT/DELETE API call

What would be your suggested scalable approach and why?

Option 1: Make API calls to Modify backend data and update the store manually within 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})
}

Option 2: Make API calls to Modify backend data and make a subsequent GET call to update the store

 // 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})
    }

Upvotes: 0

Views: 1090

Answers (1)

jwchang
jwchang

Reputation: 10864

Option 1 would be the usual choice, unless there are some information that are only accessible through those extra GET requests.

Upvotes: 1

Related Questions