Javascript 动作后不重新启动

我有一个应用程序，它有一个带有汤列表的仪表板。每一种汤都能成为日常的汤。因此，每个汤都有一个按钮，如果单击该按钮，将触发更新我的MongoDB的操作，使汤成为日常汤。当汤是日常汤时，它有3个按钮：移除、降低、移出。如果单击这些按钮中的任何一个，它们都会触发一个操作来更新我的MongoDB以更新特定的soup。我遇到的问题是，当单击这些按钮时，它会执行操作，但不会在屏幕上重新呈现。我必须手动刷新页面以查看它是否实际工作

注意：我正在使用Reduxtunk立即发送操作（请参见下面的代码）

我试过使用

Object.assign({}, state, action.payload)

在我的减速机中，确保避免直接更改状态

我还尝试用以下方法重写减速器：

case "UPDATE_SOUP":
      return {
        ...state,
        isDaily: action.payload.isDaily,
        isLow: action.payload.isLow,
        isOut: action.payload.isOut
      };

反应汤成分：

class Soup extends Component {
  render() {
    const { soup } = this.props;
    return (
      <div>
        <div key={soup.name} className="card">
          <div
            className={`card-header ${
              soup.isDaily ? "alert alert-primary" : null
            }`}
          >
            {soup.isDaily ? (
              <span className="badge badge-primary badge-pill">Daily Soup</span>
            ) : (
              "Soup"
            )}
          </div>
          <div className="card-body">
            <h5 className="card-title">{soup.name}</h5>
            <p className="card-text">
              {soup.isLow ? (
                <span className="badge badge-warning badge-pill">
                  This soup is marked as LOW.
                </span>
              ) : null}
              {soup.isOut ? (
                <span className="badge badge-dark badge-pill">
                  This soup is marked as OUT.
                </span>
              ) : null}
            </p>

            {soup.isDaily ? (
              <div>
                <button
                  onClick={() =>
                    this.props.updateSoup(soup._id, {
                      isDaily: false,
                      isLow: false,
                      isOut: false
                    })
                  }
                  className="btn btn-danger "
                >
                  Remove
                </button>
                <button
                  onClick={() =>
                    this.props.updateSoup(soup._id, {
                      isLow: true
                    })
                  }
                  className="btn btn-warning"
                >
                  Getting Low
                </button>
                <button
                  onClick={() =>
                    this.props.updateSoup(soup._id, {
                      isOut: true
                    })
                  }
                  className="btn btn-dark"
                >
                  Ran Out
                </button>
              </div>
            ) : (
              <button
                onClick={event =>
                  this.props.updateSoup(soup._id, {
                    isDaily: true
                  })
                }
                className="btn btn-primary"
              >
                Make Daily
              </button>
            )}
          </div>
        </div>
      </div>
    );
  }
}

function mapStateToProps({ soupsReducer }) {
  return { soupsReducer };
}

export default connect(
  mapStateToProps,
  actions
)(Soup);

减速器：

export default function(state = [], action) {
  switch (action.type) {
    case "FETCH_SOUPS":
      return action.payload;
    case "ALL_SOUPS":
      return action.payload;
    case "UPDATE_SOUP":
      return action.payload;
    default:
      return state;
  }
}

---

问题是，你在每一个动作中都通过做动作来重新书写你的整个状态

return action.payload; 

你需要像这样做

return { ...state, someStateKey: action.payload.data.someKey }

其中，根据动作类型，从响应中提取所需数据并将其设置为您的状态

---

如果你能提供更多关于回复的信息，我可以用更具体的细节更新答案

我的想法围绕着你代码的这一部分

export const updateSoup = (id, update) => async dispatch => {
  const res = await axios.put(`/api/allsoups/${id}`, update);
  dispatch({ type: "UPDATE_SOUP", payload: res.data });
};

export default function(state = [], action) {

        // ...code...

    case "UPDATE_SOUP":
      return action.payload;

        // ...code...

    }
}

试试这个：

确定souptype和对操作的更改

dispatch({ type: "UPDATE_SOUP", payload: res.data, souptype: id, update: update });

将souptype的状态更新到reducer

export default function(state = [], action) {
    case "UPDATE_SOUP":
      const newstate = action.payload;
      neswstate.soups[action.souptype] = action.isDaily ? true : false;
      return newstate;

---

当然，为什么这行不通呢？只是因为我在猜测你的状态是什么，汤是如何储存在这种状态的。您的代码中没有构造函数或状态定义，因此，您需要调整上面的内容以匹配您的状态定义。

我返回的action.payload或res.data={{u id:'numbersAndLetters'，name:'soupName'，isDaily:true，isOut:false，isLow:false，}我尝试了您上面的建议，但没有成功

dispatch({ type: "UPDATE_SOUP", payload: res.data, souptype: id, update: update });

export default function(state = [], action) {
    case "UPDATE_SOUP":
      const newstate = action.payload;
      neswstate.soups[action.souptype] = action.isDaily ? true : false;
      return newstate;