react native redux payload always returns undefined - reactjs

Question

I have created an app using react native typescript and redux. I have successfully configured the store and everything. But the problem is when I tried to login, I dispatch payload to authReducer and it returns undefined.
store.tsx
import AsyncStorage from "#react-native-async-storage/async-storage";
import { createStore, applyMiddleware } from "redux";
import { createLogger } from 'redux-logger';
import { persistStore, persistReducer } from "redux-persist";
import rootReducer from "../_redux/reducers/index";
const persistConfig = {
key: "root",
storage: AsyncStorage,
whitelist: ["authReducer"],
};
const persistedReducer = persistReducer(persistConfig, rootReducer);
const store = createStore(persistedReducer, applyMiddleware(createLogger()));
let persistor = persistStore(store);
export { store, persistor };
authReducer.tsx
export const initState = {
isAuthenticated: false,
user: {},
token: "No Token",
};
const rootReducer = (state = initState, action: any) => {
if (action.type === "LOG_IN") {
const { isAuthenticated, user, token } = action.payload;
return {
...state,
isAuthenticated,
user,
token,
};
}
if (action.type === "LOG_OUT") {
const { isAuthenticated, user, token } = action.payload;
return {
...state,
isAuthenticated,
user,
token,
};
}
if (action.type === "UPDATE_PROFILE") {
return {
...state,
user: {
...state.user,
name: action.name,
email: action.email,
phone: action.phone,
},
};
}
return state;
};
export default rootReducer;
Login.tsx
axios
.post(`${BASE_URL}/login`, {
email: email,
password: password,
})
.then((response) => {
setLoading(false);
if (response.data.success) {
// response.data.user_data = {user_id: 1, user_name: "Jithin Varghese", user_email: "jithin#gmail.com", user_phone: "1234567890"}
// response.data.token = 1
logIn(true, response.data.user_data, response.data.token);
navigation.navigate("Home");
}
})
.catch((error) => {
console.log(error);
setLoading(false);
});
};
const mapDispatchToProps = (dispatch: any) => ({
logIn: ({ isAuthenticated, user, token }: any) => {
dispatch({
type: "LOG_IN",
payload: {
isAuthenticated,
user,
token,
},
});
},
});
const mapStateToProps = (state: any) => ({
isAuthenticated: state.authReducer.isAuthenticated,
user: state.authReducer.user,
token: state.authReducer.token,
});
export default connect(mapStateToProps, mapDispatchToProps)(Login);
The isAuthenticated, user, token is always undefined after dispatch. You can check the below screenshot for more details.
Initial load
After login axios call dispatch (logIn(true, response.data.user_data, response.data.token))
I have tried a lot to find a solution and I couldn't find any. What is the problem. I cannot figure this out.
I think prev state is causing the problem. It is empty initially.

Answer 1

I think you're passing 3 args to "logIn" instead of 1 arg as an object
instead of calling it like: logIn(true, response.data.user_data, response.data.token);
it should be like
logIn({isAuthenticated:true, user:response.data.user_data, token:response.data.token});

Answer 2

You are not passing data correctly in Action. You need to pass one argument and you are passing three arguments.
You need to pass data like this
logIn(isAuthenticated:true , user: response.data.user_data, token: response.data.token)