Redux 从动作中访问状态

Question

我已经阅读了多个在线资源，建议在您的操作中尽可能避免访问状态，但是我想知道在发出另一个异步请求之前检查我的状态中是否已经存在数据时这样做是否可以接受？目前我的行动是这样的：

export const setCategory = (id) => {
    const state = store.getState();
    const categories = state.display.categories;
    const category = categories.find(category => category.id === id);
    const categoryVids = category ? category.videos : {};
    if(Object.keys(categoryVids).length <= 0) { 
        return dispatch => {
            //Do some async stuff
        }
    }
}

对我来说，在这里访问状态似乎更合乎逻辑。将此逻辑移至组件是否被认为是更好的做法？

Answer 1

您的代码在某种程度上是正确的，但您应该将整个内容编写为 thunk，因为这样它就可以直接访问 getState：

export const setCategory = (id) => {
    return (dispatch, getState) => {
        const state = getState();
        const {categories} = state.display;
        const category = categories.find(category => category.id === id) || {};
        const {videos : categoryVids = {} } = category;

        if(Object.keys(categoryVids).length >= 0) {
            // dispatch here
        }
    }
}

Answer 2

您的动作创建者通常应该是不会产生副作用的纯函数。您不想在动作创建器中访问状态的原因是因为这意味着无法根据其参数预测 setCategory() 的结果。 Redux 的全部意义在于能够以一种直接的方式推断应用程序的状态。如果您不能轻松地跟踪由分派给定操作所导致的状态变化，那将变得更加困难。

当您需要根据状态的某些部分是否存在来有条件地调度操作时，在“客户端”代码（即从 Redux 的角度来看的客户端）中执行此操作会更清楚，在这种情况下，这可能是零件。如果数据丢失，您可以进行检查，然后发送某种LOAD_DATA 操作。

但是，如果您需要做一些异步操作，那么您应该研究 Redux 中 async operations 的常见模式，或者使用现有的库，例如 Redux Thunk 或 redux-saga。