Проблема:
Я создал приложение реагирования, и там я создал действие входа в систему, подобное этому.
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
});
Но когда я смотрю в инструментах избыточности, он показывает только действие входа в систему.Но в любом месте ошибки нет.Я много пытался понять, что может быть причиной этой проблемы.Но я не смог этого сделать.Может ли кто-нибудь помочь мне решить эту проблему?Спасибо.