Разработка реактива-редуктора социального сайта

Question

В моем приложении три разных компонента. то есть. 1. Лента новостей (здесь я получаю все сообщения) 2. Тенденции (посты с популярными хэштегами) 3. UserProfile (получение всех сообщений этого пользователя)

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;        
}
};

в этом проекте, если я перейду от одного компонента к другому компоненту (от панели мониторинга до трендов), я потерял все данные панели управления. Но если вы хотите сохранить функциональность «Нравится», комментарии для панели инструментов и трендовых публикаций, то я должен написать функциональность «Нравится комментарий» отдельно для всех трех упомянутых компонентов. Этот подход будет работать, но я не удовлетворен тем, что должен написать то же самое трижды. Кто-нибудь может предложить лучший подход?

Answer 1

Рекомендуется решить эту проблему с помощью компонентов более высокого порядка , которые являются компонентами React, которые «обертывают» другой компонент для обеспечения общих функциональных возможностей. Вы должны найти множество ресурсов, объясняющих это, но типичный компонент более высокого порядка выглядит примерно так:

import React from 'react';

const higherOrderComponent = (WrappedComponent) => 
{
  class HOC extends React.Component {
    render() {
      return <WrappedComponent />;
    }
  }

  return HOC;
};

Затем вы можете добавить любую функциональность, которая должна использоваться совместно с компонентом более высокого порядка. Затем вы можете использовать его примерно так:

const SimpleHOC = higherOrderComponent(MyComponent);

РЕДАКТИРОВАТЬ: если вы хотите, чтобы одна и та же функциональность применялась для различных действий редуктора, это просто. Просто используйте один и тот же обратный вызов для разных случаев, как в этом примере:

case 'ACTION_1':
case 'ACTION_2':
case 'ACTION_3':
    // callback here

Для вашего приложения это будет примерно так:

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;
        }
    });