Question

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

注意：我正在使用reduxThunk立即分发动作（请参见下面的代码）

我尝试使用

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);

反应SoupList组件（以显示所有汤）：

class SoupList extends Component {
  componentDidMount() {
    this.props.allSoups();
  }

  renderSoup() {
    const { soupsReducer } = this.props;
    if (soupsReducer.length > 0) {
      return soupsReducer.map(soup => {
        if (soup.name !== "date") {
          return <Soup key={soup._id} soup={soup} />;
        } else {
          return null;
        }
      });
    }
  }

  render() {
    console.log("SoupListProps=", this.props);
    return <div>{this.renderSoup()}</div>;
  }
}

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

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

操作：

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) {
  switch (action.type) {
    case "FETCH_SOUPS":
      return action.payload;
    case "ALL_SOUPS":
      return action.payload;
    case "UPDATE_SOUP":
      return action.payload;
    default:
      return state;
  }
}

Answer 1

问题是您要通过执行每个操作来重新编写整个状态

return action.payload;

您需要做类似的事情

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

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

如果您可以提供有关回复的更多信息，我可以提供更具体的信息来更新答案

Answer 2

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

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...

    }
}

尝试一下：

确定汤的类型和操作的变化...

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;

当然，为什么这不起作用？仅仅是因为我在猜测您所处的状态以及汤在这种状态下的存储方式。您的代码中没有构造函数或状态定义，因此，您需要调整以上内容以匹配状态的定义。

反应后不重新渲染

2 个答案: