React/reduxとthunkMiddlewareを使用した構成ストアのバリエーション

Question

Redux-Thunkがどのように機能し、そのストアがさまざまな方法で構成されているかを理解するために多くの例を使用しました。私は古い方法や新しい方法があると思いますが、私は紛失しています。ここに私が特定した3つのパターンがあります。

簡単な方法：

import { createStore, applyMiddleware } from 'redux'; 
import thunkMiddleware from 'redux-thunk' 
import createLogger from 'redux-logger' 

    const loggerMiddleware = createLogger() 


    const store = createStore(rootReducer, applyMiddleware(thunkMiddleware, loggerMiddleware)); 

公式Redditの非同期Exemple道（here）：

import { createStore, applyMiddleware } from 'redux' 
import thunkMiddleware from 'redux-thunk' 
import createLogger from 'redux-logger' 

const loggerMiddleware = createLogger() 

export default function configureStore(preloadedState) { 
    return createStore(
    rootReducer, 
    preloadedState, 
    applyMiddleware(
     thunkMiddleware, 
     loggerMiddleware 
    ) 
) 
} 

古い方法誰かが私にそれらの間の違いを説明することができますか？

import {compose, createStore, applyMiddleware } from 'redux'; 
import thunkMiddleware from 'redux-thunk'; 

const createAppStore = compose(
    applyMiddleware(thunkMiddleware) 
)(createStore); 

export default function configureStore(initialState){ 
    const store = createAppStore(rootReducer, initialState); 

    return store; 
}; 

そこから私は、少なくとも4つの質問があります。

• を、我々はまだ作曲を使用する必要がありますか？私は「古い」例でしか見つけられないのですか？
• import ReduxThunk from 'redux-thunk'とimport thunkMiddleware from 'redux-thunk'には違いがありますか？
• 簡単な方法も正しいですか？
• Reddit Async ExempleのpreloadedStateパターンがわかりません。

ありがとう。

Answer 1

createStoreの署名は、createStore(reducer, [preloadedState], [enhancer])です。

preloadedStateは、アプリケーションを初期化する前にロードする初期状態です。たとえば、サーバー上の最初のページを事前レンダリングして、アプリケーションの状態をHTML内にJSONとして渡したいとします。時には、この状態を非同期にフェッチする必要があります。これは、2番目の例が有用な場合です。あなたの状態を取得し、その状態を使ってAjax呼び出しのコールバックにストアを作成します。
第3引数。

enhancerは、ストアクリエイターを構成して新しい拡張ストア作成者を返す高次関数です。 applyMiddlewareは代引きで出荷されるenhancerです。複数のストアエンハンサーを組み合わせたい場合は、compose機能を使用する必要があります。例えば

、クロムのためのredux-devtools-extensionので、あなたが望むように、あなたの変数に名前を付けることができdefault exportを使用import something from 'redux-thunk'するときは、

let store = createStore(reducer, initialState, compose(
    applyMiddleware(...middleware), 
    window.devToolsExtension ? window.devToolsExtension() : f => f 
)); 

compose機能を必要とするあなたのアプリでそれを使用するenhancerです。それは問題ではありません。

単純なやり方でも、何もする必要がなければ正解です。