Использовать пользовательское промежуточное ПО для асинхронных действий - PullRequest
Новая
       11

Использовать пользовательское промежуточное ПО для асинхронных действий

0 голосов
/ 26 июня 2019

Я столкнулся с проблемой с избыточностью в приложении «Реакция». Я настроил магазин. У меня есть 2 компонента Login и Layout. Я добавил зависимость избыточного-thunk для асинхронной операции (моя проблема здесь лежит), реакт-избыточный, избыточный и т. Д ...

Я новичок в ReactJS. Я взял образец кода React (Material-UI Theme Приложение Dashboard) от 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,
});

1 Ответ

0 голосов
/ 26 июня 2019

попробуйте изменить свою строку импорта на следующую: 

import thunkMiddleware from 'redux-thunk';

и передать thunkMiddleware в applyMiddleware функцию вместо просто thunk

...