-1

What the difference between these configureStore functions and where has gone initialState argument?

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

import rootReducer                      from '../reducers';

export default function configureStore(initialState){
   const store = createStore(
        rootReducer,
        initialState,
        applyMiddleware(thunk, logger) //list of middlewares in arguments
    );
    return store;
}

export default function configureStore() {
    const store = compose( //composed middlewares
        applyMiddleware(thunk),
        applyMiddleware(logger)
    )(createStore)(rootReducer);
    return store;
}
Firanolfind
  • 1,588
  • 1
  • 15
  • 32

1 Answers1

1

From the documentation:

All compose does is let you write deeply nested function transformations without the rightward drift of the code. Don't give it too much credit!

and it's usage:

This is a functional programming utility, and is included in Redux as a convenience. You might want to use it to apply several store enhancers in a row.

So in essence, it is a helpful utility if you want to apply a bunch of middleware:

 ...
 compose(
    applyMiddleware(thunk),
    DevTools.instrument(),
    // ... more enhancements, that may or may not be middleware
 )
 ...

applyMiddleware is specifically for wrapping the store's dispatch function, whereas compose will allow you to add additional enhancers that may not have anything to do with dispatch, such as Redux Dev Tools.

Middleware only wraps the store's dispatch function. Technically, anything a middleware can do, you can do manually by wrapping every dispatch call, but it's easier to manage this in a single place and define action transformations on the scale of the whole project.

Wolfie
  • 1,231
  • 8
  • 15
  • 1
    I know this. I don't get why not to list them in `applyMiddleware` arguments? – Firanolfind Aug 04 '17 at 13:04
  • 1
    @Firanolfind I updated the answer. applyMiddleware is specific to enhancements related to dispatch, whereas compose allows adding enhancements that may have nothing to do with that – Wolfie Aug 04 '17 at 13:09
  • Can you please explain me why we have to pass arguments at the end of compose like `compose(...)(createStore)(rootReducer)` in answer? Please add example how to write __second code__ without compose, it would help me to get how it works. – Firanolfind Aug 04 '17 at 13:14
  • @Firanolfind For example, `compose(f, g, h)` is identical to doing `(...args) => f(g(h(...args)))` – Wolfie Aug 04 '17 at 13:21
  • That is abstract example, I know how compose works. But in example context I confused with **applyMiddleware** functions. Please add example to your answer. Best regards – Firanolfind Aug 04 '17 at 13:24
  • @Firanolfind can you link to the code with multiple applyMiddleware calls? – Wolfie Aug 04 '17 at 13:25
  • [Example repo](https://github.com/maxfarseer/react-router-ru-tutorial/blob/add_redux_v3_prepare/src/store/configureStore.js). And also, where is **initialState** argument? – Firanolfind Aug 04 '17 at 13:26
  • @Firanolfind initial state argument is optional. It will default if no value is specified. In terms of the applyMiddleware calls: If you use other store enhancers in addition to applyMiddleware, make sure to put applyMiddleware before them in the composition chain because the middleware is potentially asynchronous. For example, it should go before redux-devtools because otherwise the DevTools won't see the raw actions emitted by the Promise middleware and such. – Wolfie Aug 04 '17 at 13:31