Redux - 为什么在根状态下加载状态

Question

我想了解Redux并遇到一些困难.

我理解combineReducer的概念,即....

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

但是,如果我有数千种产品,只能在产品页面上找到.我不明白为什么我需要在root上加载它们; 对我而言,除非用户访问产品页面,否则这将减慢应用程序的初始启动速度.

这是与redux的关系吗？

Answer 1

在Redux应用程序中,您始终可以在一开始就构建整个状态.使用Redux,你有一个商店和一个状态 - 一切都应该从那个状态逐渐渗透到组件的道具上.但是,这并不意味着您实际上需要在启动时将所有数据加载到状态,只需要结构需要存在.这就是为每个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将是一个空数组,直到您触发实际需要您加载产品数据的操作(即您转到应用程序中的"产品"页面或其他内容).如果您随后进入应用程序的其他地方,产品数据确实会保留在您的状态,但这是一件好事 - 下次渲染产品页面时,您可以随时获取数据而无需执行数据库抬头.