Question

我有以下Axios请求：

componentDidMount() {
    axios.post('http://localhost:3030/api/weather/refresh').then(response => {
      store.dispatch(refreshWeather(response))
    });
  }

这会向Redux发送一个调度，用于以常见模式提供表示容器。

我的问题是 - 我怎样才能做到这一点axios.post（）请求可以在应用程序的其他组件或部分中重复使用？我已将其导入到导入的外部文件中，但是有更好的方法来构建我的项目，以便将所有axios请求组合在一起吗？

我有以下mapDispatchToProps：

const mapDispatchToProps = (dispatch, ownProps) => {    
  return {
    onClickRefresh: () => {
      dispatch(refreshWeather(arr))
    }
  }
}

我希望运行与componentDidMount（）相同的请求，但不确定如上所述的重复使用的最佳方法。

由于

Answer 1

您可以通过应用redux-thunk中间件并使用中间方法执行请求来实现此目的。

const REFRESH_WEATHER = 'REFRESH_WEATHER';

export const requestWeather = () => dispatch => {
    axios.post('http://localhost:3030/api/weather/refresh').then(response => {
        dispatch(refreshWeather(response));
    });
};

const refreshWeather = (response) => {
    return {
        type: REFRESH_WEATHER,
        response,
    };
}

如果您发现自己制作了大量重复的类似请求，可以构建自己的api中间件来处理任何请求。

Answer 2

Redux中的模式是使用Async Action Creator，这样它就可以像任何其他Action Creator一样重复使用并映射到你的道具。

official docs中有一个很好的例子说明了这一点。

Answer 3

config.js

module.exports = {
  API_URL: 'http://localhost:3030/api',
};

makeRequest.js

import axios from 'axios';
import { API_URL } from './config';

module.exports = (path, method, ...args) => axios[method](API_URL + path, ...args);

actions.js

module.exports.refreshWeather = (newWeather) => ({
  type: 'REFRESH_WEATHER',
  payload: newWeather,
});

stories.js

import makeRequest from './makeRequest';
import { refreshWeather as refreshWeatherAction } from './actions';

module.exports.resfreshWeatherStory = (dispatch) => (
    makeRequest('/weather/refresh', 'post')
        .then(response => dispatch(refreshWeatherAction(response)));
);

YourComponent.js

...
import { refreshWeatherStory } from './stories';
...
componentDidMount() {
    refreshWeatherStory(store.dispatch);
}
...

OtherPlace.js

...
import { refreshWeatherStory } from './stories';

const mapDispatchToProps = dispatch => ({
    onClickRefesh: () => refreshWeatherStory(dispatch),
});
...

你明白了

在React-Redux

3 个答案: