Configuration store variation with React/redux and thunkMiddleware

Question

I've been through many examples to understand how Redux-Thunk works and most the time the store is configured in a various way. I guess there's the old way or the new way but I'm kind of lost. Here is three pattern that I've identified. If someone can explain me the differences between them :

The simple way :

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

the Official Reddit Async Exemple way (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

    )

  )

}

the old way ?

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;

};

From there I have at least four questions :

Do we still need to use compose ? I only find it in "old" exemple ?

Is there any differences between
import ReduxThunk from 'redux-thunk'
and
import thunkMiddleware from 'redux-thunk'
?

Does the simple way is also correct ?

I don't understand the
preloadedState
pattern from the Reddit Async Exemple.

thanks.

Answer 1

The signature for createStore is createStore(reducer, [preloadedState], [enhancer]).

preloadedState is an initial state you load before you initialize your app. For instance, if you prerender your first page on a server and want to pass app state as a JSON inside your HTML. Sometimes you need to fetch this state asynchronously that is where the second example is useful. You fetch your state and create a store using that state in the callback of your ajax call.
The third argument.

enhancer is a higher-order function that composes a store creator to return a new, enhanced store creator. applyMiddleware is a store enhancer shipped with redux. If you want to combine multiple store enhancers you need to use compose function.

For instance, redux-devtools-extension for chrome is an enhancer so to use it in your app you would need compose function

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

When you import something from 'redux-thunk' you use default export so you can name your variable as you want. It doesn't matter.

A simple way is also correct if you don't need anything fancy it would work just fine.

Configuration store variation with React/redux and thunkMiddleware

Sign up