reactjs - 从组件传递值作为参数状态或访问操作创建器中的状态？

Question

在我的项目中，我有一个 Action 创建器，它依赖于应用程序状态下的值来生成新值或决定要分派(dispatch)哪些 Action 。我的问题是知道哪种方法是正确的。我想了两个办法。在操作创建器中访问这些值:

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);
    }
    ...
} 

在我的 Action 创建器中

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

    return{
        type: types.CHANGE_PREVIOUS_PAGE,
        previousPage
    }
};

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

Answer 1

在我看来，始终使用/检索最接近执行时间的状态，这里是操作创建者(或者更具体地说，是您返回的将要执行的 thunk)。

请记住，dispatch 可能有任意数量的中间件在实际 store.dispatch 调用之前运行。这可以包括异步中间件，因此在调用调度和最终运行的 store.dispatch 调用之间状态可能已经改变。

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

还将状态中的数据放入 props 中(使用 redux 容器和连接辅助方法)将导致每次更改时重新渲染，这在某些情况下可能会影响性能。

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