Question

我的应用程序中包含三个不同的组件。即。 1. Newsfeed（这里我正在获取所有帖子） 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

解决此问题的推荐方法是使用higher order components，它们是React组件，可以“包装”另一个组件以提供通用功能。您应该能够找到足够的资源来解释这一点，但是一个典型的高阶组件看起来像这样：

import React from 'react';

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

  return HOC;
};

然后可以将需要共享的所有功能添加到高阶组件。然后，您可以使用类似以下的方式：

const SimpleHOC = higherOrderComponent(MyComponent);

编辑：如果您希望相同的功能适用于不同的reducer动作，那很简单。对于不同的情况，只需执行相同的回调，如下例所示：

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

设计社交网站的ReactReducer

1 个答案: