Javascript 使用axios和redux的正确方法

我正在使用React、Redux和MongoDB创建一个小应用程序。 不幸的是，我在使用axios和redux时遇到了问题。我试着在里面这样使用它：

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;
       }
     .........

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));
   }
 }

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

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;
       }
     .........

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')
);

从'react redux'导入{Provider}；
从“redux”导入{createStore，applyMiddleware}；
从“redux thunk”导入thunk中间件；
从“./reducers”导入减速机；
const createStoreWithMiddleware=applyMiddleware（thunkMiddleware）
（createStore）；
ReactDOM.render(
,
document.getElementById（'root'））
);

请尝试下面的代码。我认为你没有正确地创建商店

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')
);

从'react redux'导入{Provider}；
从'redux'导入{createStore，combinereducer，applyMiddleware}；
从“redux thunk”导入thunk中间件；
从“./reducers”导入减速机；
let减速器=组合减速器（减速器）
//applyMiddleware使用中间件增强createStore的性能：
const createStoreWithMiddleware=createStore（reducer、applyMiddleware（thunkMiddleware））
ReactDOM.render(
,
document.getElementById（'root'））
);

你导入了redux thunk吗？是的，我现在正在编辑我的帖子，以展示我是如何做到这一点的。注意：还原器应该是纯函数，没有副作用，所以将axios放在那里真是个坏主意。正如我所说，我将axios移到了动作创建者那里，所以他们只返回新状态；）我已经用过组合传感器了。我从“./reducers”导入的那些减速机是合并为一个减速机的减速机。我需要重新组合吗？@kreha不，那么你不需要了。@kreha你也有同样的错误吗？请发布一些关于错误的详细信息。我会在几秒钟内为您将所有内容放到github上，并发布错误截图。好的，我解决了问题。我忘了重写一个acrion创建者，这导致了这个错误；p注释后，错误消失。重写之后，一切都应该是好的。如果有任何其他问题，我会回到这里。谢谢你的帮助：）