I am dispatching twice to the redux store from my functional component using redux hooks.
When I dispatch these individually like this only one of them is stored in my redux store as it seems to refresh each time and only keep one. How can I dispatch these together or prevent the redux store from refreshing and losing the first dispatch payload??
dispatch({
type: "access_token",
payload: googleUser.accessToken,
});
dispatch({
type: "firebase_userId",
payload: result.user.uid,
});
Redux store
import React from "react";
import symbolicateStackTrace from "react-native/Libraries/Core/Devtools/symbolicateStackTrace";
import { applyMiddleware, createStore } from "redux";
import thunk from "redux-thunk";
const initialState = {
access_token: "",
firebase_userId: "",
};
const counterReducer = (
state = initialState,
action
) => {
if (action.type === "access_token") {
return {
access_token: action.payload,
};
}
if (action.type === "firebase_userId") {
return {
firebase_userId: action.payload,
};
}
return state;
};
const store = createStore(counterReducer, applyMiddleware(thunk));
export default store;
In your reducer, you always need to return a copy of current state. That's the problem. Nothing wrong with how you dispatch actions.
const counterReducer = (
state = initialState,
action
) => {
if (action.type === "access_token") {
return {
// copy & update state
...state,
access_token: action.payload,
};
}
if (action.type === "firebase_userId") {
return {
// copy & update state
...state,
firebase_userId: action.payload,
};
}
return state;
};