Question

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

我想对第三方API进行ajax调用。（我想使用OpenWeatherMap API）

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

第一部分安装很简单：

npm install --save redux-promise

npm install --save axios

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

所以我有几个问题（所有特定的反应 - redux-universal-hot-example）：

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

Answer 1

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

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

所以回答你的问题： 1.我不是100％确定入门套件是否具有获取第三方数据的内容。然而，使用具有redux-promise的axios正是我所做的。是的，见上文如何。 3.是的，该入门工具包显示了一种创建一系列中间件的方法，然后使用新的扩展运算符将它们提供给applyMiddleware函数。这是一个curried函数，然后接受createStore函数。这在第21行的create.js文件中显示。这是finalCreateStore在生产期间的内容。 4.我使用它的方式是使用redux-actions创建Flux标准操作所以..

// 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解析，则随后在有效负载中重新调度结果。使用axios，您将获得一个对象，该对象具有您想要的数据作为该对象的属性。显示的是在action.payload.data

的reducer中

我正在研究的项目就是一个例子。请不要使用调度调用包装操作，因此我所要做的就是直接调用actionCreators以获得与调度相同的结果。这在redux docs on bindActionCreators中有解释。

actionCreator

reducer

Component is where I dispatch the action

Where I hook up the middleware＆lt; - 与您的create.js文件类似

再次通过调度promise redux-promise截取（我的理解方式）promise，解析它然后再次调度相同的操作，但是在操作的payload属性上使用promise的结果对象

如何在react-redux-universal-hot-example入门套件中添加axios？

1 个答案: