How to update useReducer states in React? - reactjs

Question

I am trying to get the item from localStorage and pass it too useReducer State.
When i switch from one button to another button states is not updating. My initialState did update but states does not update
my initialStates and states on console.log both the values differ. states always stores the previous values of selected button Genid item value and initialStates stores the current selected values of selected button Genid item value but the main problem is did not update to useReducer states part
const Played = ( {Genid} ) => {
console.log("Played page ")
console.log("*************************************************")
console.log(Genid)
console.log(JSON.parse(localStorage.getItem(Genid)))
const initialState = {
DATA: JSON.parse(localStorage.getItem(Genid)) || [],
isFetching: localStorage.getItem(Genid) ? true : false,
hasError: false,
}
console.log(initialState);
const [states, dispatch] = useReducer(reducer, initialState)
console.log(states)

Answer 1

So the issue in your code was simple, the initialState wasn't populated in reducer because the displayid was undefined initially and then was set to ditto
The reason there is this behavior is because in Veritcal component you setDisplayId and that effect run ater initial render and by that time the undefined displayId is already being used by the Horizontal component
Now, there were other issues with your code too. You were updating sessionStorage with response.data.payload but there was no key as payload in response.data
Also Movement component is mapping on state.data but that is an object. Instead you need to map on state.data.abilities
Changed code snippets below
Movement.js
const Movement = ({ states }) => {
console.log(states);
return (
<div>
{states.data &&
states.data.abilities.map(ability => <div>{ability.ability.name}</div>)}
</div>
);
};
export default Movement;
Horizontal.js
console.log(displayid);
const initialState = {
// data: displayid? JSON.parse(sessionStorage.getItem(displayid)): [],
// isFetching: displayid && sessionStorage.getItem(displayid) ? true : false,
// hasError: false
};
const [states, dispatch] = useReducer(reducer, initialState);
// console.log(states);
useEffect(() => {
if (displayid && !sessionStorage.getItem(displayid)) {
console.log(displayid);
axios
.get(`https://pokeapi.co/api/v2/pokemon/${displayid}/`)
.then(response => {
console.log(response);
console.log(response.data);
dispatch({
type: "First",
payload: response.data
});
console.log(response.data);
sessionStorage.setItem(displayid, JSON.stringify(response.data));
})
.catch(error => {
console.log(error);
dispatch({
type: "Second"
});
});
} else if (displayid && sessionStorage.getItem(displayid)) {
// populate data from localStorage
const localData = {
data: JSON.parse(sessionStorage.getItem(displayid)) || [],
isFetching: sessionStorage.getItem(displayid) ? true : false,
hasError: false
};
dispatch({ type: "POPULATE", payload: localData });
}
}, [displayid]);
Working demo