时间戳

首页 > 解决方案 > React/Redux 控制功能组件何时呈现

javascript - React/Redux 控制功能组件何时呈现

问题描述

我遇到了这个问题，我的应用程序更新太多。在我的减速器中，我有一个感兴趣的动作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不要触发reducer 的更新，尽管这可能是一种反模式。shouldComponentUpdate考虑到评估我是否应该更新可能需要检查 2 个对象数组，我也尽量不走低谷。首先不触发更新比必须比较多个数组更容易处理。

标签： javascriptreactjsredux

解决方案

所以如果你使用 redux-thunk，你可以真正增强你的 action-creators 内部的逻辑。在这种情况下，我们将通过实际将您的 reducer 数据拉入我们的 action-creator 来检查是否有任何任务已过期。然后将非常相似的逻辑应用到你已经在做的事情上，我们将决定我们是否真的会发送一个新的动作。

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 为空，那么我们将不会发送任何操作。没有行动，意味着没有减速器更新。这意味着没有组件重新渲染。

推荐阅读