Question

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

我是ReactJS的新手。我拿了一个样本React代码（Material-UI Theme 来自github的Dashboard应用程序）及其正常工作。我开发了一个小的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,
});

Answer 1

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

import thunkMiddleware from 'redux-thunk';

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

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

1 个答案: