使用自定义中间件进行异步操作答案

【问题标题】：Use custom middleware for async actions使用自定义中间件进行异步操作
【发布时间】：2019-06-26 12:36:21
【问题描述】：

我在 react 应用程序中遇到了 redux 的问题。我配置了商店。我有 2 个组件登录和布局组件。我为异步操作添加了 redux-thunk 依赖项（我的问题在这里）、react-redux、redux 等......

我是 ReactJS 的新手。我拿了一个示例 React 代码（Material-UI Theme 来自 github 的仪表板应用程序）及其正常工作。我开发了一个小型 React 应用程序。我从仪表板应用程序中复制了一些代码并在我的应用程序中使用了它。问题来了，它说错误：动作必须是普通对象。使用自定义中间件进行异步操作。代码如下...

LoginState.jsx



const initialState = {
  isUserAuthenticated: false
};

export const LOGIN_SUCCESS = "LOGIN_SUCCESS";
export const LOGIN_START = "LOGIN_START";

export const loginSuccess = () => {
  return { type: LOGIN_SUCCESS };
};

export const loginStart = () => {
  return { type: LOGIN_START };
};

export const loginUser = (rootUser, userName, password) => dispatch => {
  dispatch(loginStart());
  if (!!rootUser && !!password && !!userName) {
    setTimeout(() => {
      localStorage.setItem("access_token", "1");
      dispatch(loginSuccess());
    }, 2000);
  } else {
  }
};

export default function loginReducer(state = initialState, { type, payload }) {
  switch (type) {
    case LOGIN_SUCCESS:
      return { ...state, isUserAuthenticated: true };
    case LOGIN_START:
      return { ...state, isUserAuthenticated: false };
    default:
      return state;
  }
}

```






LoginContainer.jsx

```

import { compose, withState, withHandlers } from "recompose";
import { connect } from "react-redux";
import LoginView from "./LoginView";
import loginUser from "./LoginState";

export default compose(
  connect(
    state => ({
      isUserAuthenticated: state.login.isUserAuthenticated
    }),
    { loginUser }
  ),

  withState("rootUser", "setRootUser", ""),
  withState("userName", "setUserName", ""),
  withState("password", "setPassword", ""),
  withHandlers({
    handleLogin: props => () => {
      props.loginUser(props.rootUser,props.userName,props.password)
    },
    handleChange: props => (e, input) => {
      if (input === "rootUser") {
        props.setRootUser(e.target.value);
      }
      if (input === "userName") {
        props.setUserName(e.target.value);
      }
      if (input === "password") {
        props.setPassword(e.target.value);
      }
    }
  })
)(LoginView);





LoginView.jsx

```

import React from "react";
import { TextField, Button } from "@material-ui/core";

const Login = ({ ...props }) => {
  return (
    <div>
      <form>
        <TextField
          label="RootUser"
          value={props.rootUser}
          onChange={e => props.handleChange(e, "rootUser")}
          name="rootUser"
        />
        <br />
        <TextField
          label="User"
          value={props.userName}
          onChange={e => props.handleChange(e, "userName")}
          name="userName"
        />
        <br />
        <TextField
          label="Password"
          value={props.password}
          onChange={e => props.handleChange(e, "password")}
          name="password"
          type="password"
        />
        <br />
        <Button onClick={props.handleLogin} variant="contained" color="primary">
          Login
        </Button>
      </form>
    </div>
  );
};

export default Login;





store

```

import { createStore, applyMiddleware } from "redux";
import thunk from "redux-thunk";
import reducer from "../reducers/index";
export default createStore(reducer, applyMiddleware(thunk));


reducers

```
import login from "../components/login/LoginState";
import { combineReducers } from "redux";

export default combineReducers({
  login,
});

【问题讨论】：

标签： reactjs redux react-redux redux-thunk

【解决方案1】：

尝试将您的导入 thunk 行更改为下一行：

import thunkMiddleware from 'redux-thunk';

并将thunkMiddleware 传递给applyMiddleware 函数，而不仅仅是thunk

【讨论】：

嗨，Mikhail Tokarev，我完全按照你说的做了，但仍然是同样的错误。