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

Posted 2023-02-22

【中文标题】如何将 axios 添加到 react-redux-universal-hot-example 入门套件？

【英文标题】：How do I add axios to react-redux-universal-hot-example starter kit?

【发布时间】：2016-07-04 10:56:42

【问题描述】：

所以我选择了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）：

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

【参考方案1】：

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

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

所以回答你的问题： 1. 我不能 100% 确定入门工具包是否有获取第 3 方数据的内容。然而，使用带有 redux-promise 的 axios 正是我所做的。 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 '拦截' promise 并解决它。一旦 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 属性上。

【讨论】：

谢谢@natac，你的建议奏效了。我修改了create.js 我仍然看不到它的排序...我怀疑我的工作流程是错误的。我在 redux 开发工具中添加了 weatherForecast.js 和 Forecast.js，我可以看到数据，但没有呈现任何内容...

嘿，我刚刚克隆了您链接到的那个 repo，并且可以在 localhost:3000 上获得一个 React Redux 示例页面，但是在单击周围时，我注意到在控制台中连接到代理服务器时出错。看起来它想要在 3030 端口上使用它。由于时间限制，我没有深入研究。我很抱歉，希望你能弄明白！

谢谢。是的，现在已经修复了。 （最初，我错误地引用了范围。）