3

So I picked react-redux-universal-hot-example as a starter kit.

I want to make ajax calls to 3rd party API. (I want to use OpenWeatherMap API)

I want to use axios and react-promise middleware.

The first part installation is easy:

npm install --save redux-promise

npm install --save axios

Then I need to apply redux-promise middleware ... I think it goes into create.js somehow.

So I have several questions (all specific to react-redux-universal-hot-example) :

  1. Is it the right way to do 3rd party calls using axios with redux-promise or the kit already have another way to do ajax requests?
  2. Is create.js the right place to add redux-promise middleware?
  3. Also, is there a concise syntax to apply multiple middlewares at the same time?
4

1 回答 1

2

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

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

因此，回答您的问题： 1. 我不能 100% 确定入门工具包是否具有获取第 3 方数据的内容。然而，使用带有 redux-promise 的 axios 正是我所做的。2. 是的，见上文。3. 是的，该入门工具包展示了一种方法，即创建一组中间件，然后使用新的扩展运算符将它们输入到 applyMiddleware 函数中。这是一个柯里化函数，它将接受 createStore 函数。这显示在第 21 行的 create.js 文件中。这是生产期间 finalCreateStore 的内容。4. 我一直在使用它的方式是使用创建 Flux 标准操作的redux-actions所以..

// 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，您将返回一个对象，该对象具有您想要的数据作为该对象的属性。显示的是在减速器中action.payload.data

我正在做的一个项目就是以这个为例。请不要将动作包装在调度调用中，所以我所要做的就是直接调用 actionCreators 以获得与调度相同的结果。这在 bindActionCreators 上的 redux 文档中有解释。

动作创作者

减速器

组件是我调度动作的地方

我在哪里连接中间件<-类似于您的create.js文件

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

于 2016-03-18T14:44:08.897 回答