Question

问题：

我已经创建了一个React应用程序，并且在那里我创建了这样的登录操作。

import { createAction } from "redux-actions";

// Types
export const LOGIN = "login/LOGIN";
export const LOGIN_FAILED = "login/LOGIN_FAILED";
export const LOGIN_SUCCESS = "login/LOGIN_SUCCESS";
debugger;
export default {
  doLogin: createAction(LOGIN),
  loginSuccess: createAction(LOGIN_SUCCESS),
  loginFailed: createAction(LOGIN_FAILED)
};

这是我的index.js操作。

import * as login from './login'


// Export module actions and types
export {
    login as loginTypes
}
export const loginActions = login.default

这是我的登录减少器。

import { loginTypes as types } from "../actions";
import { handleActions } from "redux-actions";

const initialState = {
  username: "",
  hasError: false,
  error: {},
  resp: { status: 0, message: "" },
  loggedIn: false
};

export default handleActions(
  {
    [types.LOGIN]: (state, { payload }) => ({
      ...state,
      username: payload.username,
      hasError: false,
      error: {}
    }),
    [types.LOGIN_SUCCESS]: (state, { payload }) => ({
      ...state,
      username: "",
      hasError: false,
      resp: payload,
      error: null,
      loggedIn: true
    })
  },
  initialState
);

这是我的减速器index.js。

import { combineReducers } from "redux";
import LoginReducer from "./login";

const rootReducer = combineReducers({
  login: LoginReducer
});

export default rootReducer;

这是我的loginService文件。

import { createLogic } from "redux-logic";

import { loginTypes } from "../actions";
import { loginActions } from "../actions";

import * as API from "./HTTPClient";
import * as endPoints from "./EndPoints";
import jwtDecode from "jwt-decode";

export default [
  createLogic({
    type: loginTypes.LOGIN, // only apply this logic to this type
    latest: true, // only take latest
    debounce: 1000, // Wait 1 s before triggering another call

    process({ MockHTTPClient, getState, action }, dispatch, done) {
      let HTTPClient;

      if (MockHTTPClient) {
        HTTPClient = MockHTTPClient;
      } else {
        HTTPClient = API;
      }

      let loginRequestObject = {
        username: action.payload.username,
        pass: action.payload.pass
      };

      HTTPClient.Post(endPoints.LOGIN, loginRequestObject)
        .then(resp => resp.data)
        .then(data => {
          console.log(data);
          var decodedToken = jwtDecode(data.token);
          localStorage.setItem("jwt", data.token);
          var user = {
            userName: decodedToken.preferred_username,
            roleName: decodedToken.role,
            name: decodedToken.name
          };
          localStorage.setItem("user", JSON.stringify(user));
          localStorage.setItem("role", decodedToken.role);
          HTTPClient.setAuth(); // Set token for subsequent calls
          return data.token;
        })
        .then(token => dispatch(loginActions.loginSuccess(token)))
        .catch(err => {
          var errorMessage = "Invalid username or password.";

          console.error("Login Error ", err); // log since could be render err
          if (err && err.code === "ECONNABORTED") {
            errorMessage = "Please check your internet connection.";
          }

          dispatch(
            loginActions.loginFailed({ title: "Error!", message: errorMessage })
          );
        })
        .then(() => done()); // call done when finished dispatching
    }
  })
];

这是我从组件调用登录操作的方式。

this.props.doLogin({
        username: this.state.username,
        password: this.state.password
      });

但是当我查看redux工具时，它仅显示登录操作。但是在任何地方都没有错误。我做了很多尝试，以找出导致此问题的原因。但是我无法这样做。有人可以帮我解决这个问题吗？谢谢。

为什么在React和Redux中动作不会触发服务？

0 个答案: