React Redux thunk - Action is overriding unexpected information - reactjs

Question

im building a reddit clone, fetching top post. The app should have a favorites post CRUD.
So what i build is a two columns layout, left side is the post list and right part has post detail OR favorites list when switch is ON.
All this is handled by two reducers: favorites and post. The issue is: when i fire set favorites action, this is overriding post data for some reason. I just reviewed the whole flow several times and i cant fine what is going on.
This is the redux dev tools state, with post fetched and then with show favorites action
This is favorites reducer:
import {
FETCH_FAVORITES_REQUEST,
FETCH_FAVORITES_SUCCESS,
FETCH_FAVORITES_ERROR,
SHOW_FAVORITES
} from '../constants';
const initialState = {
data: [],
isLoading: false,
error: false,
show: false
};
const favorites = (state = initialState, action) => {
switch (action.type) {
case FETCH_FAVORITES_REQUEST:
return {
...state,
isLoading: true
};
case FETCH_FAVORITES_SUCCESS: {
return {
...state,
isLoading: false,
data: action.payload
};
}
case FETCH_FAVORITES_ERROR:
return { ...state, error: true, isLoading: false };
case SHOW_FAVORITES:
return { ...state, show: !state.show };
default:
return initialState;
}
};
export default favorites;
and this is posts reducer:
import {
FETCH_POST_REQUEST,
FETCH_POST_SUCCESS,
FETCH_POST_ERROR,
SET_READED,
DISMISS_ALL,
DISMISS_POST
} from '../constants';
const initialState = {
data: [],
isLoading: false,
error: false,
lastFetched: null,
allDismissed: false
};
const posts = (state = initialState, action) => {
switch (action.type) {
case FETCH_POST_REQUEST:
return {
...state,
isLoading: true
};
case FETCH_POST_SUCCESS: {
const data = [...state.data, ...action.payload];
return {
...state,
data,
lastFetched: action.lastFetched,
isLoading: false,
allDismissed: false
};
}
case FETCH_POST_ERROR:
return { ...state, error: true, isLoading: false };
case SET_READED: {
const newData = state.data;
const foundIndex = newData.findIndex((x) => x.id === action.payload);
newData[foundIndex].readed = true;
return {
...state,
data: newData
};
}
case DISMISS_ALL: {
return {
...state,
allDismissed: true,
data: []
};
}
case DISMISS_POST: {
return {
...state,
data: state.data.filter((post) => post.id !== action.payload)
};
}
default:
return initialState;
}
};
export default posts;
This is the component from where show favorites action is being dispatched:
import React from 'react';
import styled, { css } from 'styled-components';
import Toggle from 'react-toggle';
import { useDispatch, useSelector } from 'react-redux';
import { useMediaQuery } from 'react-responsive';
import { DEVICE_SIZE } from '../constants';
import { showFavorites } from '../actions/favorites';
const ToogleFavorites = styled.div`
position: fixed;
bottom: 5%;
right: 5%;
text-align: end;
z-index: 2;
${({ isMobile }) =>
isMobile &&
css`
font-size: small;
`}
`;
export default () => {
const dispatch = useDispatch();
const { show } = useSelector((state) => state.favorites);
const isTabletOrBigger = useMediaQuery({ minDeviceWidth: DEVICE_SIZE.tablet });
const handleToogle = () => dispatch(showFavorites());
return (
<ToogleFavorites isMobile={isTabletOrBigger}>
<Toggle defaultChecked={show} onChange={handleToogle} />
<div>Toogle favorites</div>
</ToogleFavorites>
);
};
favorites action (seems not big deal):
export const showFavorites = () => ({
type: SHOW_FAVORITES
});
Let me know anything extra info. Thanks a lot!

Answer 1

your reducer has the default case to return intialState which means any action that isn't explicitly handled resets the state. you want to return state instead.