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

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

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

products.data将是一个空数组，直到您触发实际需要您加载产品数据的操作（即，您转到应用程序中的“产品”页面或其他内容）。确实，如果您随后进入应用程序的其他地方，产品数据将保留在您的状态，但这是一件好事 - 下次渲染产品页面时，您已经掌握了数据，而无需进行数据库查找。

Answer 2

在我们的应用中，我们为产品制作了API，每页限制为15个。所以我们的减速机就是这样的。

collection: {
  "total": 0,
  "per_page": 0,
  "current_page": 0,
  "last_page": 0,
  "from": 0,
  "to": 0,
  data: []
},

isFetching: false,
isFetchingError: false

在第一次加载时我们获取了有限数量的产品，然后我们使用了redux https://github.com/rackt/reselect

中的选择器进行了分页

加载数千个数据会让您的应用变得非常慢。

const paginated = (state = initialState, action) => {
 switch (action.type) {
case FETCH_PAGINATED_PRODUCTS:
  return {
    ...state,
    isFetching: true,
    isFetchingError: false
  };

case FETCH_PAGINATED_PRODUCTS_SUCCESS:
  return {
    ...state,
    collection: action.payload,
    isFetching: false
  };

case FETCH_PAGINATED_PRODUCTS_ERROR:
  return {
    ...state,
    isFetching: false,
    isFetchingError: true
  };

default:
 return state

我们已将axios用于请求： https://github.com/mzabriskie/axios

Answer 3

以下是我们如何在redux-async中实现axios

 export function getAll(page = 1) {
  return (dispatch, getState) => {
    const state = getState();
    const { filters } = state.products.paginated;

    if ( state.products.paginated.isFetching ) {
      return;
    }

    dispatch({ type: FETCH_PAGINATED_PRODUCTS });

    return axios
      .get(`products?page=${page}&limit=16&filters=${JSON.stringify(filters)}`)
      .then((res) => dispatch({
        type: FETCH_PAGINATED_PRODUCTS_SUCCESS,
        payload: res.data
      }))
      .catch((res) => dispatch({
        type: FETCH_PAGINATED_PRODUCTS_ERROR,
        /*payload: res.data.error,*/
        error: true
      }));
  }
}

export function get(id) {
  return (dispatch, getState) => {
    const state = getState();

    if ( state.products.resource.isFetching ) {
      return;
    }

    dispatch({ type: FETCH_PRODUCT });

    return axios
      .get(`products/${id}`)
      .then((res) => dispatch({
        type: FETCH_PRODUCT_SUCCESS,
        payload: res.data.data
      }))
      .catch((res) => dispatch({
        type: FETCH_PRODUCT_ERROR,
        /*payload: new Error(res.data.error),*/
        error: true
      }));
  }

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

3 个答案: