Реакция не повторяется после действия - PullRequest
0 голосов
/ 29 января 2019

У меня есть приложение, в котором есть панель инструментов со списком супов.Каждый суп обладает способностью быть ежедневным супом.Таким образом, у каждого супа есть кнопка, которая при нажатии запускает действие по обновлению моего 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
      };

React Soup Component:

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

React SoupList Component (Показать все супы):

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

1 Ответ

0 голосов
/ 29 января 2019

Проблема в том, что вы переписываете все свое состояние в каждом действии, выполняя

return action.payload; 

Вам нужно сделать что-то вроде

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

Где в зависимости от типа действияВы извлекаете необходимые данные из ответа и устанавливаете их в своем состоянии.

Если вы можете предоставить больше информации об ответе, я могу обновить ответ с более конкретными деталями

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...