React-Redux-Reselect应用程序的优化问题

Question

我使用React和Redux只有几个月的时间，最近我实现了Reselect，以便让应用程序更快。我不能让它以我想要的方式工作，我也不确定问题来自哪里。

我继续为我工作的开发部门开发一个规划应用程序。主页可以有一定的周数，包含在一个Row中。一周中的每一天都是一个组件，在每个Day组件中，您可能都有一个TimePlanned组件。对于开发人员来说，每个票证都有一个Row组件行，每个用户可以有多达10个票证，so...there有很多组件。

我实现了Reselect，这样我的许多连接组件就不会像以前单独使用Redux时那样频繁地重新呈现。

我有一个关于Day组件的问题。我试图让他们访问尽可能少的数据，以防止其他Day在他们不关心更改时重新渲染。

下面是我想要“排序”的数据：

planifie:{
   tickets : {
     29859 : {
       ticketId : 29859,
       typeId : 1,
       projectId : 6,
       userId : 3;
       planifications : [549],
       comments : []
     }
   },
   planifications : {
      549 : {
         planId : 549,
         ticketId : 29859,
         planDate : "2019-05-16",
         planTime : 480,
         userId : 3
      },
      550 : {
         planId : 550,
         ticketId : 29859,
         planDate : "2019-05-16",
         planTime : 480,
         userId : 6
      }
   },
   users : {
      3 : {
       userId : 3,
       userName : "pdupont",
       tickets : [29859],
       comments : [],
       planifications : [549]
      }
   }
}

当然，每个“类别”都有几条记录。

我的选择器看起来像这样：

export const getAllPlans = state => state.planifie.planifications
export const getGroup = state =>  _.find(state.filters.plannedFilters.groupBy, ['isActive', true])
export const getUserPropsId = (state,props) => props.userId

export const makeGetAllPlans = () => {
    return createSelector(
        getAllPlans,
        plans => plans
    )
}

export const makeGetRelevantObjectPlans = () => {
    return createSelector(
        [getAllPlans,getGroup,getUserPropsId],
        (planifications,group,user) => {
            switch (group.code) {
                case 'project':
                    return _.filter(planifications, {projectId : user})
                case 'user':
                    return _.filter(planifications, {userId : user})
                case 'type':
                    return _.filter(planifications, {typeId : user})
            }
        }
    )
}

props.userId总是一个数字，但是如果我的计划是按projets排序的，它将等同于一个projectId。带记忆的选择器的目标是返回与传递到props中的Id相关的planifications对象。

在本例中，我的过滤器是by user。我希望我的Day组件的Row只能访问带有'3‘userId的平面化。

在我的Day组件中，这是我调用选择器的方式：

const makeMapStateToProps = () => {
    const getComs = makeGetRelevantComments()
    const getPlans = makeGetRelevantPlans()
    const getPlanifications = makeGetRelevantObjectPlans()
    const mapStateToProps = (state, props) => {
        return {
            coms : getComs(state,props),
            plans : getPlans(state,props),
            planifications : getPlanifications(state,props)
        }
    }
    return mapStateToProps
}

const mapDispatchToProps = (dispatch) => (
    bindActionCreators(ActionsCreators, dispatch)
)

export default connect(makeMapStateToProps, mapDispatchToProps)(Day)

我在componentDidUpdate()中添加了一个函数来查看触发重新呈现的内容，并且在每个Day组件上，即使是具有不同props.userId的组件，planifications也会发生变化，所以我的页面需要很长时间才能加载。

例如，如果我使用此Redux reducer操作更新一个平坦化的日期：

case types.SET_PLAN:
            return {
                ...state,
                planifie: {
                    ...state.planifie,
                    planifications : {
                        ...state.planifie.planifications,
                        [action.data.planId] : {

                 ...state.planifie.planifications[action.data.planId],
                            ...action.data.plan
                        }
                    }
                },
                isLoading: false
            }

然后，每个单独的my Day组件都会重新呈现。

我想知道我是不是在代码中遗漏了什么，如果我误解了带记忆的选择器能做什么，如果lodash filter函数阻止了代码的不可变性，或者如果我的数据没有为这种类型的事情格式化。

谢谢。

Answer 1

我看了你的代码，发现有几件事可能是有帮助的：

1.存储选择器必须，因为每次更新存储后，_.find将返回新的数组，并且makeGetRelevantObjectPlans的存储将被破坏。

因此，getGroup可能如下所示：

const groupBy = state => state.filters.plannedFilters.groupBy;

const getGroup = createSelector(
  [groupBy],
  (groupBy) => _.find(groupBy, ['isActive', true]),
);

1. 使用createStructuredSelector而不是makeMapStateToProps可能对

也有帮助