反应/Redux 控制功能组件何时呈现

Question

我遇到了这个问题，我的应用程序更新太多。在我的减速器中，我有一个感兴趣的动作checkTasks.它没有多大作用，checkTasks浏览我的当前任务列表，如果其中任何一个已过期，它会将它们从tasks数组中删除以将它们放入expiredTasks数组中。我的问题是，大多数时候，checkTasks什么都不做，只是有时。但是每次调用checkTasks时，我的组件都会被渲染。

我的组件mapStateToProps如下所示：

const mapStateToProps = (_state) => {
return {
tasks: _state.tasksState
}
}

我的组件关心状态中的 2 个属性：

function Tasts({ tasksState: _tasksState}){
...
return <>
{renderExpired(_tasksState.expiredTasks)}
{renderTasks(_tasksState.tasks)}
</>
}

还原剂

const reducer(_state = { tasks: [], expiredTasks: [] }, _action){
const newState = { ..._state };
...
case 'checkTasks':
for (let i = newState.tasks.length - 1; i >= 0; i--) {
if (isExpired(newState.tasks[i])) {
newState.expiredTasks.push(newState.tasks.splice(i, 1)[0]);
}
}
break;
...
return newState;
}

我注意到的是，每次(每秒一次)调用checkTasks操作时，我的组件都会重新渲染，即使实际上expiredTasks和tasks中的信息没有更改。

如果我能把mapStateToProps改成类似的东西

const mapStateToProps = (_state) => {
return {
tasks: _state.tasksState.tasks,
expiredTasks: _state.tasksState.expiredTasks
}
}

这可能会停止不断刷新，但是，这似乎会破坏所有刷新。包括从一个阵列移动到另一个阵列的任务。我不知道是否有办法告诉 redux不要从化简器触发更新，尽管这可能是一种反模式。 我也尽量不去shouldComponentUpdate，因为评估我是否应该更新可能需要检查 2 个对象数组。首先不触发更新比必须比较多个数组更容易处理。

Answer 1

因此，如果您使用的是 redux-thunk，则可以真正增强动作创建者内部的逻辑。在这种情况下，我们将通过实际将您的化简器数据拉入我们的操作创建器来检查是否有任何任务已过期。然后，将非常相似的逻辑应用于您已经在做的事情，我们将决定是否实际调度一个新操作。

const checkTasks = () => {
return (dispatch, getState) => {
const currentState = getState().yourReducer //your reducer key goes here. Returns its current state
const expiredTasks = [] 
for(let i = currentState.tasks.length - 1; i >= 0; i--){
if(isExpired(currentState.tasks[i]){ //remember to import your isEmpty() logic
expiredTasks.push(currentState.tasks[i])
}
}
if(expiredTasks.length > 0){
dispatch({
type: "checkTasks"
})
}
}
}

如果过期任务为空，则我们不会发送任何操作。 不执行任何操作，表示没有化简器更新。这意味着没有组件重新渲染。