使用 axios 和 redux 的正确方法

Posted 2023-02-22

【中文标题】使用 axios 和 redux 的正确方法

【英文标题】：Proper way to use axios with redux

【发布时间】：2018-01-28 03:25:36

【问题描述】：

我正在使用 React、Redux 和 MongoDB 创建小应用程序。 不幸的是，我在使用 axios 和 redux 时遇到了问题。我尝试在 reduce 中使用它，如下所示：

export function users(state = initialState, action) 
   switch (action.type) 

     case 'USER_ADD':
       
         axios.post('http://localhost:4200/users/add/post', user: 
         action.user).then(() => 
           return 
             ...state,
             items: [
               ...state.users,
               action.user
             ]
           
         ).catch(err => console.log(err));
         break;
       
     .........

但它不起作用。然后我将 axios 移到了我的动作创建者中，所以它看起来像这样：

export function addUser(user) 

   return function (dispatch) 
     axios.post('http://localhost:4200/users/add/user', user:user)
       .then(() => dispatch(
         type: USER_ADD,
         user: user
       )).catch(err => console.log(err));
   
 

它将新文档发布到 mongo 数据库，但它也给了我错误：操作必须是普通对象。使用自定义中间件进行异步操作。是的，我正在使用 redux thunk ;)

谁能告诉我问题出在哪里？随意询问更多代码，不确定还有什么有用的。

编辑：

我正在使用这样的 redux-thunk：

import  Provider  from 'react-redux';
import  createStore, applyMiddleware  from 'redux';
import thunkMiddleware from 'redux-thunk';
import reducers from './reducers';


const createStoreWithMiddleware = applyMiddleware(thunkMiddleware)
(createStore);

ReactDOM.render(
  <Provider store=createStoreWithMiddleware(reducers)>
    <App />
  </Provider>,
  document.getElementById('root')
);

【问题讨论】：

你导入redux-thunk了吗？

是的，我现在正在编辑我的帖子以展示我是如何做到的

旁注：Reducers 应该是没有副作用的纯函数，所以把 axios 放在那里真的是个坏主意。

正如我所说，我将 axios 移至动作创建者，因此它们只会返回新状态；）

【参考方案1】：

请尝试以下代码。我认为您没有正确创建商店。

import  Provider  from 'react-redux';
import  createStore,combineReducers, applyMiddleware  from 'redux';
import thunkMiddleware from 'redux-thunk';
import reducers from './reducers';

let reducer = combineReducers(reducers)
// applyMiddleware supercharges createStore with middleware:
const createStoreWithMiddleware = createStore(reducer, applyMiddleware(thunkMiddleware))
ReactDOM.render(
  <Provider store=createStoreWithMiddleware>
    <App />
  </Provider>,
  document.getElementById('root')
);

【讨论】：

我已经使用了 combineReducers。我从 './reducers' 导入的那些减速器是组合成一个的减速器。我需要重新组合吗？

@kreha 不，那你就不需要了。

@Kreha 您是否遇到同样的错误？请同时发布一些有关错误的详细信息。

我会在一秒钟内为你把所有东西都放在github上，然后发布错误截图

好的，我解决了这个问题。我忘记重写其中一位 acrion 创建者，它导致了这个错误；p 评论后错误消失了。重写后一切都应该没问题。如果有任何其他问题，我会回到这里。感谢您的帮助:)