Designing react- reducer of a social site - reactjs

Question

I have three different components in my app.
ie. 1. Newsfeed (here i am fetching all the posts)
2. Trending (posts with of popular hashtags)
3. UserProfile (fetching all the posts of that user)
const postReducer = (state = postReducerDefaultState, action) => {
switch(action.type){
case 'ADD_POST':{
return[
action.post,
...state
]
}
case 'FIND_POST':
return action.post
case 'REMOVE_POST':
return state.filter(post => post._id !== action.id)
case 'EDIT_POST':
return state.map(post => {
if (post._id === action.id){
return{
...post,
...action.updates
};
}else{
return post;
}
});
case 'LIKE_POST':
return state.map(post => {
if(post._id === action.id){
return{
...post,
likes:[...post.likes,action.likedBy]
}
}else{
return post;
}
});
case 'UNLIKE_POST':
return state.map(post => {
if(post._id === action.id){
return {
...post,
likes : post.likes.filter(liker => liker !==
action.likedBy)
}
}else{
return post;
}
})
case 'ADD_COMMENT':
return state.map(post => {
if(post._id === action.pid){
return{
...post,
comments:[...post.comments,action.comment]
}
}else{
return post;
}
});
case 'SET_POST':
return action.posts;
case 'HASHTAG_POST':
return action.posts;
default:
return state;
}
};
in this design if i go from one component to other component, (dashboard to trending), I lost all the data of the dashboard. But if want to keep the like,comment functionalty for dashboard and trending posts, then i have to write the like-comment functionality separately for all the mentioned three components. This approach will work, but i am not satisfied with as i have to write same thing thrice. Can anyone suggest the best approach?

Answer 1

The recommended way to solve this problem is with higher order components, which are React components that "wrap" another component to provide common functionality. You should be able to find plenty of resources explaining this, but a typical higher order component looks something like this:
import React from 'react';
const higherOrderComponent = (WrappedComponent) =>
{
class HOC extends React.Component {
render() {
return <WrappedComponent />;
}
}
return HOC;
};
You can then add whatever functionality needs to be shared to the higher order component. Then, you can use it something like this:
const SimpleHOC = higherOrderComponent(MyComponent);
EDIT: If you want the same functionality to apply for different reducer actions, that's straightforward. Just have the same callback fall through for different cases, as in this example:
case 'ACTION_1':
case 'ACTION_2':
case 'ACTION_3':
// callback here
For your application, it will be something like this:
case 'EDIT_POST':
case 'LIKE_POST':
case 'UNLIKE_POST':
return state.map(post => {
if (post._id === action.id){
return{
...post,
...action.updates
};
}else{
return post;
}
});