ajax - 如何将 axios 添加到 React-redux-universal-hot-example 入门套件中？

Question

所以我选择了react-redux-universal-hot-example作为入门套件。

我想对第 3 方 API 进行 ajax 调用。(我想使用OpenWeatherMap API)

我想使用axios和 react-promise中间件。

第一部分安装很简单:

npm install --save redux-promise

npm install --save axios

然后我需要应用 redux-promise 中间件......我认为它进入 create.js不知怎的。

所以我有几个问题(都特定于react-redux-universal-hot-example):

1. 使用 axios 和 redux-promise 进行第 3 方调用是正确的方法吗？或者该套件已经有另一种方法来执行 ajax 请求？
2. create.js 是添加 redux-promise 中间件的正确位置吗？
3. 此外，是否有一种简洁的语法可以同时应用多个中间件？

Answer 1

我不能 100% 确定您是否想使用 react-promise 还是 redux-promise。我假设是 redux 版本。是的，create.js 文件是添加它的正确位置。您从 redux-promise 导入一个中间件，然后将其添加到第 9 行的丢失的中间件中 从“redux-promise”导入promiseMiddleware；

const middleware = [createMiddleware(client), reduxRouterMiddleware, promiseMiddleware];

所以回答你的问题:1. 我不能 100% 确定入门套件是否有获取第三方数据的内容。然而，将 axios 与 redux-promise 结合使用正是我所做的。2. 是的，请参阅上文了解如何操作。3. 是的，该入门工具包展示了一种方法，即创建中间件数组，然后使用新的扩展运算符将它们输入到 applyMiddleware 函数中。这是一个柯里化(Currying)函数，它将接受 createStore 函数。这显示在 create.js 文件的第 21 行中。这就是生产期间的 FinalCreateStore。4.我一直使用这个的方式是 redux-actions创建 Flux Standard Actions So..

// actionCreator
import { createAction } from 'redux-actions';
import { FETCH_DATA } from '../constants; // a file that exports constants
const fetchData = createAction(FETCH_DATA);
// reducer
const reducer = (state, action) => {
    switch(action.type) {
        case FETCH_DATA:
            return {
                ...state,
                fetchedData: action.payload.data
            };
        default: 
            return state;
    }
}

// then dispatch the promise and not an action
store.dispatch(fetchData(axios.get('some_route')));

然后 redux-promise 会“拦截”promise 并解决它。一旦 promise 解决，就会重新调度操作，并将结果包含在有效负载中。使用 axios，您将返回一个对象，该对象具有您想要的数据作为该对象的属性。其显示在 reducer 中 action.payload.data

我正在从事的一个项目就是以此为例。请不要使用调度调用来包装操作，因此我所要做的就是直接调用 actionCreators 以获得与调度相同的结果。 redux docs on bindActionCreators对此进行了解释。 。

actionCreator

reducer

Component is where I dispatch the action

Where I hook up the middleware <-- 类似于您的 create.js 文件

再次通过发送 promise redux-promise 拦截(我的理解方式) promise ，解决它，然后再次发送相同的操作，但将 promise 的结果放在 有效负载上 操作对象的属性。