4

私は Redux を理解しようとしていますが、いくつかの問題があります。

私は、combineReducer の概念を理解しています。つまり ....

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

しかし、何千もの製品があり、製品ページでしか入手できない場合はどうなるでしょうか。ルートでロードする必要がある理由がわかりません。私にとって、これは、ユーザーが製品ページに移動しない限り、必要のないアプリの最初の起動を遅くします.

これはreduxの場合と同じですか？

4

3 に答える 3

5

Redux アプリでは、常に最初に状態全体を構築します。Redux では、1 つのストアと 1 つの状態があります。すべては、その 1 つの状態からコンポーネントの props に細分化する必要があります。ただし、これは実際に起動時にすべてのデータを状態にロードする必要があるという意味ではなく、構造がそこにある必要があるということだけです。これが、レデューサーごとに初期状態オブジェクトを設定する必要がある理由です。

データベースからロードする何千もの製品レコードがあるとします。製品レデューサーでは、次のようなことができます。

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実際に製品データをロードする必要があるアクションを起動するまで、空の配列になります (つまり、アプリの製品ページなどに移動します)。アプリ内の別の場所に移動した場合、製品データがそのままの状態に残ることは事実ですが、これは素晴らしいことです。次に製品ページをレンダリングするときに、データベースを作成する必要なく、データを自由に使用できます。調べる。

于 2015-12-07T15:15:25.957 に答える
0

私たちのアプリでは、製品用の API を作成しましたが、1 ページあたり 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

于 2015-12-07T15:31:42.613 に答える