从组件传递值作为参数状态还是访问动作创建者中的状态？

Posted 2023-02-22

【中文标题】从组件传递值作为参数状态还是访问动作创建者中的状态？

【英文标题】：Pass values as parameters state from the component or access the status in the action creator?

【发布时间】：2016-11-21 18:27:34

【问题描述】：

在我的项目中，我有一个动作创建器，它依赖于应用程序状态中的值来生成新值或决定调度什么动作。我的问题是知道哪种方法是正确的。我想到了两种方法。在动作创建者中访问这些值：

export const changePreviousPage = () => 
    return (dispatch, getState) => 
        let pagination = getState().appReducers.availability.pagination;

        let previousPage = pagination.actualPage != 1 ? pagination.actualPage - 1 : pagination.actualPage;
        dispatch(
            type: types.CHANGE_PREVIOUS_PAGE,
            previousPage
        );  
    
;

我认为的另一个选择是将值从组件传递给动作创建者：

在我的组件中

class Pagination extends Component 
    ... 
    handlePreviousPage() 
        const pagination = this.props;
        this.props.changePreviousPage(pagination);
    
    ...
 

在我的动作创建器中

export const changePreviousPage = pagination => 
    let previousPage = pagination.actualPage != 1 ? pagination.actualPage - 1 : pagination.actualPage;

    return
        type: types.CHANGE_PREVIOUS_PAGE,
        previousPage
    
;

解决这个问题的最佳方法是什么？

【参考方案1】：

在我看来总是在最接近执行的时间使用/检索状态，这里是动作创建者（或者更确切地说是您返回的将执行的 thunk）。

请记住，dispatch 可能在实际 store.dispatch 调用之前运行任意数量的中间件。这可能包括异步中间件，因此状态可能在调用 dispatch 和 store.dispatch 调用之间发生了变化。

另一个需要考虑的问题是，您可能会在动作创建者中分派多个事物，这会改变状态并使您传递给顶部动作创建者的内容无效。这也是为什么我认为let state = getState() 在动作创建者的顶部是一个坏主意的原因，除非您非常确定在您的处理过程中不会发生任何变化（一旦您涉及任何 API 调用，我总是会再次使用 getState()使用存储变量）。

同样将数据从 state 放入 props（使用 redux 容器和 connect 辅助方法）将导致每次更改时重新渲染，这在某些情况下可能会影响性能。

我个人的编码偏好也是让 mapDispatchToProps 中的事情尽可能简单（假设这是您传递处理程序的地方，如 handlePreviousPage）并避免任何数据处理（在您的示例中它并不多，但您可以轻松如果您正在为动作创建者准备数据，看看这可能会如何失控）。