React如何在API调用中使用redux?

时间:2020-01-15 20:47:30

标签: javascript reactjs api redux axios

我很好奇如何将从API调用中找到的数据存储到redux存储中,然后访问它。这是我正在使用的代码。我对redux不熟悉,希望对如何使用它有更好的了解。

const mapStateToProps = state => {
  return {
    test: state.simpleReducer.test
  };
};

const mapDispatchToProps = dispatch => ({
  simpleAction: () => dispatch(simpleAction())
});

class App extends Component {
  weatherData = {};
  componentDidMount = () => {
    this.newAction();
  };

  newAction = async () => {
    let weatherResponse;

    await axios({
      method: "get",
      url: "http://api.openweathermap.org/data/2.5/weather?q=${city},${country}&appid=${API_KEY}&units=metric"
    }).then(function(response) {
      weatherResponse = [...response.data];
    });
    this.weatherData = weatherResponse;
    console.log(this.weatherData);
  };

1 个答案:

答案 0 :(得分:1)

数据的来源并不重要-数据通过调度将数据作为有效负载的动作进入您的商店,而reducer则采用该有效负载并将其放入商店。

因此,当您的请求完成时,您需要调度一个动作,并确保它在化简器中得到处理。

使用react-redux中的connect函数将mapDispatchToProps和mapStateToProps函数连接到组件,以便您可以发出操作并使用生成的更新状态。