reactjs - Redux - 为什么在根状态下加载所有内容

Question

我正在尝试理解 Redux，但遇到了一些困难。

我理解了combineReducer的概念，即......

var reducer = combineReducers({
    user: userReducer,
    products: productsReducer
})

但是，如果我有数千种产品，且仅在产品页面上提供，该怎么办？我不明白为什么我需要在根目录下加载它们；对我来说，这会减慢应用程序的初始启动速度，除非用户转到产品页面，否则不需要这些东西。

这就是 redux 的方式吗？

Answer 1

在 Redux 应用程序中，您始终从一开始就构建整个状态。使用 Redux，你有一个存储和一种状态 - 一切都应该从该一种状态渗透到组件上的 props。然而，这并不意味着您实际上需要在启动时将所有数据加载到状态中，只是结构需要存在。这就是为什么您应该为每个 reducer 设置一个初始状态对象。

假设您有数千条从数据库加载的产品记录。在您的产品 reducer 中，您可以执行以下操作:

const initialState = {
    data: []
};

//use ES6 default parameters
function productsReducer (state = initialState, action) {
    switch (action.type) {
    case 'GET_PRODUCTS':
        //return data from action
        return {
            data: action.result
        };
    default: 
        return state;
    }
}

这意味着当您启动应用程序时，如果您使用在帖子中声明的完整 reducer ，您的应用程序状态将如下所示:

{
    user: {},
    products: {
        data: []
    }
}

products.data 将是一个空数组，直到您触发实际需要加载产品数据的操作(即您转到应用程序中的产品页面或其他内容)。确实，如果您随后转到应用程序中的其他位置，产品数据将保留在您的状态中，但这是一件很棒的事情 - 下次呈现“产品”页面时，您将已经拥有可以使用的数据，而无需创建数据库查找。