Reputation: 1
The auth reducer is not getting recognized in the global store when imported & attempted to combine with the other reducers. Where the other reducers such as alert, profile & post have been recognized by the global store.
Github: https://github.com/DariusRain/Pluto/blob/master/client/src/redux/modules/auth.js
import api from "../../utils/api";
import { setAlert } from "./alert";
// Action Types
export const REGISTER_SUCCESS = "PLUTO/AUTH/REGISTER_SUCCESS";
export const REGISTER_FAIL = "PLUTO/AUTH/REGISTER_FAIL";
export const LOGIN_SUCCESS = "PLUTO/AUTH/LOGIN_SUCCESS";
export const LOGIN_FAIL = "PLUTO/AUTH/LOGIN_FAIL";
export const USER_LOADED = "PLUTO/AUTH/USER_LOADED";
export const AUTH_ERROR = "PLUTO/AUTH/ERROR";
export const LOGOUT = "PLUTO/AUTH/LOGOUT";
export const ACCOUNT_DELETED = "PLUTO/AUTH/ACCOUNT_DELETED";
// Reducer
const initialState = {
token: localStorage.getItem("token"),
isAuthenticated: null,
loading: true,
user: null,
};
export default (state = initialState, { type, payload }) => {
switch (type) {
case USER_LOADED:
return {
...state,
isAuthenticated: true,
loading: false,
user: payload,
};
case REGISTER_SUCCESS:
return {
...state,
...payload,
isAuthenticated: true,
loading: false,
};
case LOGIN_SUCCESS:
return {
...state,
...payload,
isAuthenticated: true,
loading: false,
};
case ACCOUNT_DELETED:
return {
...state,
token: null,
isAuthenticated: false,
loading: false,
user: null,
};
case REGISTER_FAIL:
case AUTH_ERROR:
case LOGOUT:
return {
...state,
token: null,
isAuthenticated: false,
loading: false,
user: null,
};
default:
return state;
}
};
// Action Creators
export const loadUser = () => async (dispatch) => {
try {
const res = await api.get("/auth");
dispatch({
type: USER_LOADED,
payload: res.data,
});
} catch (err) {
dispatch({
type: AUTH_ERROR,
});
}
};
// Register User
export const register = (formData) => async (dispatch) => {
try {
const res = await api.post("/users", formData);
dispatch({
type: REGISTER_SUCCESS,
payload: res.data,
});
dispatch(loadUser());
} catch (err) {
const errors = err.response.data.errors;
if (errors) {
errors.forEach((error) => dispatch(setAlert(error.msg, "danger")));
}
dispatch({
type: REGISTER_FAIL,
});
}
};
// Login User
export const login = (email, password) => async (dispatch) => {
try {
const res = await api.post("/auth", { email, password });
dispatch({
type: LOGIN_SUCCESS,
payload: res.data,
});
dispatch(loadUser());
} catch (err) {
const errors = err.response.data.errors;
if (errors) {
errors.forEach((error) => dispatch(setAlert(error.msg, "danger")));
}
dispatch({
type: LOGIN_FAIL,
});
}
};
// Logout
export const logout = () => async (dispatch) => dispatch({ type: LOGOUT });
Github: https://github.com/DariusRain/Pluto/blob/master/client/src/redux/modules/index.js
import {
combineReducers
} from "redux";
import alert from "./alert";
import post from "./post";
import profile from "./profile";
import auth from "./auth";
export default combineReducers({
alert,
profile,
post,
auth,
});
Github: https://github.com/DariusRain/Pluto/blob/master/client/src/redux/index.js
import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import thunk from 'redux-thunk';
import rootReducer from './modules';
import setAuthToken from '../utils/setAuthToken';
const initialState = {};
const middleware = [thunk];
const store = createStore(
rootReducer,
initialState,
composeWithDevTools(applyMiddleware(...middleware))
);
let currentState = store.getState();
store.subscribe(() => {
let previousState = currentState;
currentState = store.getState();
if (previousState.auth.token !== currentState.auth.token) {
const token = currentState.auth.token;
setAuthToken(token);
}
});
export default store;
Pluto: https://github.com/DariusRain/Pluto
Help appreciated! 😁 -DariusRain
Upvotes: 0
Views: 340
Reputation: 176
You have a circular dependency issue. When you initialize store you import it:
App.js -> import store from './redux';
store initialization:
a) redux/modules/auth.js -> import api from "../../utils/api"
b) utils/api.js -> import store from '../redux' -> here you get crash
I'd suggest split reducers and action creators into separate files
Upvotes: 0