javascript - React/Redux 控制功能组件何时渲染

Question

我遇到了这个问题，因为我的应用程序更新太多。在我的 reducer 中，我有一个感兴趣的 Action 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)}
    </>
}

reducer

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 NOT 从 reducer 触发更新，尽管这可能是一种反模式。 我也在努力不去低谷shouldComponentUpdate鉴于评估我是否应该更新可能需要相互检查 2 个对象数组。首先不触发更新比必须比较多个数组更容易处理。

Answer 1

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

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

   }
}

如果expiredTasks为空，那么我们将不会发送任何操作。没有 Action ，意味着没有 reducer 更新。这意味着没有组件重新渲染。