Question

假设我有一个POST请求，该请求将对象中的属性状态更新为true / false。

在我的化简器中，我将它作为发布请求成功后的一个动作进行调度。

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

当前，状态可以在后端进行更改，但是除非我刷新页面，否则“ true”状态不会反映在DOM中（我正在componentDidMount（）上执行GET请求，以便在页面刷新）。

我的问题是发布请求后（如何通过单击按钮触发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: []
    }
];

我对redux / react非常陌生，所以不确定我是否做得正确。

Answer 1

您不应直接更改状态值。同样，在成功的API请求之后调度操作时，您只需将ID传递为请求的有效负载

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

您可以将状态存储为

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

如果您使用的是ajax或axios，则必须先绑定该函数

this.apicallfunction = this.apicallfunction.bind（this）;

Answer 3

通过传递有效的ID，您可以使用“ react-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
          }
}

API更新后如何更改商店状态？

3 个答案: