Как изменить состояние магазина после обновления API?

Question

Допустим, у меня есть запрос POST, который обновляет состояние свойства объекта до true / false.

В моем редукторе я отправил это как действие после того, как этот пост-запрос был успешным.

case "ADD_CHANGE_TO_TRUE_RESOLVE":
    if (action.res.errorCode == 0) {
        console.log("NO ERROR!");
        // DO SOMETHING
   }

В настоящее время статус может быть изменен в бэкэнде, но если я не обновлю страницу, то «истинный» статус не будет отражен в DOM (я выполняю запрос GET для componentDidMount (), чтобы получить последние данные, когда страница обновляется).

У меня вопрос, как я могу изменить состояние в магазине сразу после отправки запроса (запрос POST запускается одним нажатием кнопки)?

Должен ли я сделать это?

case "ADD_CHANGE_TO_TRUE_RESOLVE":
    if (action.res.errorCode == 0) {
        console.log("NO ERROR!");
        const objChanged = newState.list.find(function (obj) { return obj.id === action.res.data.id; });
        objChanged.is_favorite = true;

Учитывая, что у меня есть это как мое состояние в магазине:

const currentState = [
    {
        list: []
    }
];

Я очень плохо знаком с редуксом / реакцией, поэтому не уверен, что делаю это правильно.

Answer 1

Вы не должны напрямую изменять значение состояния. Также при отправке действий после успешного запроса API вы можете просто передать идентификатор в качестве полезной нагрузки для запроса

dispatch({
   type: 'ADD_CHANGE_TO_TRUE_RESOLVE',
   id: res.data.id
})

Теперь в магазине вы можете обрабатывать как

case "ADD_CHANGE_TO_TRUE_RESOLVE": {

    const objIndex = state.list.findIndex(function (obj) { return obj.id === action.id; });
    if(objIndex > -1) {
         // return the updated state if the id was found
         return {
              ...state,
              list: [
                  ...state.list.slice(0, index), 
                  {...state.list[objIndex], is_favorite: true},
                  ...state.list.slice(index + 1)
              ]
         }
    }
    // otherwise return the state as it is
    return state
}

Answer 2

Передав идентификатор в действии, вы можете обновить его, используя «response-addons-update»:

import update from 'react-addons-update'

case "ADD_CHANGE_TO_TRUE_RESOLVE": {
         if(action.id > -1){
              return update(state, {
                    list: {
                        [action.id]: {
                            is_favorite: { $set: true }
                        }
                    }
                })
          }
          else{
               return state
          }
}

Answer 3

вы можете сохранить состояние как

this.setState({[stateName]:value});

, если вы используете ajax или axios, вы должны сначала связать функцию, например

this.apicallfunction = this.apicallfunction.bind (это);