如何将 axios 添加到 react-redux-universal-hot-example 入门工具包？

Question

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

我想 ajax 呼叫第 3 方 API。（我想用OpenWeatherMap API）

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

第一部分安装很简单：

npm install --save redux-promise

npm install --save axios

然后我需要应用 redux-promise 中间件...我认为它以某种方式进入 create.js。

所以我有几个问题（都是针对 react-redux-universal-hot-example 的）：

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

Answer 1

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

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

所以回答你的问题： 1. 我不是 100% 确定入门工具包是否有获取第 3 方数据的内容。然而，将 axios 与 redux-promise 结合使用正是我所做的。 2. 是的，参见上面的方法。 3. 是的，入门工具包展示了一种创建中间件数组的方法，然后使用新的扩展运算符将它们提供给 applyMiddleware 函数。这是一个柯里化函数，然后将接受 createStore 函数。这显示在第 21 行的 create.js 文件中。这是生产期间 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 'intercepts' 承诺并将解决它。一旦 promise 解决了该操作，就会将结果与有效负载中的结果一起重新分派。使用 axios，您将取回一个对象，该对象具有您想要的数据作为该对象的属性。显示在带有 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 文件

再次通过调度承诺 redux-promise 拦截（我的理解方式）承诺，解决它然后再次调度相同的操作但是承诺的结果在 payload 属性动作对象。

如何将 axios 添加到 react-redux-universal-hot-example 入门工具包？

How do I add axios to react-redux-universal-hot-example starter kit?

ajax

reactjs

redux

axios

redux-promise