Simon Breton Simon Breton - 3 months ago 30
React JSX Question

Configuration store variation with React/redux and thunkMiddleware

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

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.