Question

这是我第一次使用Redux，我被困在获取数据（并处理事件）上。我想在表单提交中获取数据。我现在和下面一样创建代码。如果我准备好从服务器iw设置状态数据对象，这对我来说比较容易，但是现在我不知道如何使用getWeather函数以及如何替换setState方法。我需要传递给reducer以获得正确的数据吗？

减速器：

const initialState = {
  date: null,
  city: null,
  country: null,
  temp: null,
  temperatures: [],
  error: null,
  number: 0
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case actionTypes.GET_WEATHER:
      return {
        ...state
        // fetched data
      };
    default:
      return state;
  }
};

动作：

export const getWeather = e => {
  return async dispatch => {
    e.preventDefault();
    const city = e.target.elements.city.value;
    let temperatures = [];
    const API_CALL = await fetch(`url${city}url`);
    const data = await API_CALL.json();

    if (!city) {
      this.setState({error: "lorem ipsum"});
      return;
    }
    try {
      for (let i = 0; i < data.list.length; i += 8) {
        temperatures.push({
          date: data.list[i].dt_txt,
          temp: Math.round(data.list[i].main.temp),
          description: data.list[i].weather[0].description
        });
      }
      this.setState({
        date: data.list[0].dt_txt,
        city: data.city.name,
        country: data.city.country,
        temp: temperatures[0].temp,
        description: data.list[0].weather[0].description,
        temperatures: temperatures,
        error: null
      });
    } catch (error) {
      this.setState({ error: "lorem ipsum" });
    }
  };
};

商店：

const composeEnharcers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

const store = createStore(reducer, composeEnharcers(applyMiddleware(thunk)));

Answer 1

您将触发类型为dissetach的setpt，而不是setState

export const getWeather = e => {
  return async dispatch => {
    e.preventDefault();
    const city = e.target.elements.city.value;
    let temperatures = [];
    const API_CALL = await fetch(`url${city}url`);
    const data = await API_CALL.json();

    if (!city) {
      dispatch({type: actionTypes.GET_WEATHER, error: "lorem ipsum"});
      return;
    }
    try {
      for (let i = 0; i < data.list.length; i += 8) {
        temperatures.push({
          date: data.list[i].dt_txt,
          temp: Math.round(data.list[i].main.temp),
          description: data.list[i].weather[0].description
        });
      }
      dispatch({
        type: actionTypes.GET_WEATHER,
        payload: {
          date: data.list[0].dt_txt,
          city: data.city.name,
          country: data.city.country,
          temp: temperatures[0].temp,
          description: data.list[0].weather[0].description,
          temperatures: temperatures,
          error: null
        }
      });
    } catch (error) {
      dispatch({type:actionTypes.GET_WEATHER, error: "lorem ipsum" });
    }
  };
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case actionTypes.GET_WEATHER:
      return {
        ...state
        ...action.payload
      };
    default:
      return state;
  }
};

Redux：异步/等待并处理事件

1 个答案: