React Redux with multi applyMiddleware

Question

I want to use the following answer Redux state persistence with a database

import {createStore, compose, applyMiddleware} from 'redux';

const localStorageMiddleware = ({getState}) => {
  return (next) => (action) => {
    const result = next(action);
    localStorage.setItem('applicationState', JSON.stringify(
      getState()
    ));
    return result;
  };
};

const store = compose(
  applyMiddleware(
    localStorageMiddleware
  )
)(createStore)(
  reducer,
  JSON.parse(localStorage.getItem('applicationState'))
)

But I didn't understand the javascript syntax here How he used compose(argument)(createStore)(argument)?

is there any alternative like createStore(reducer,initialState,compose(argument))?

Also, how is initial state will be passed here

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

export default function configureStore(initialState) {  
  const store = createStoreWithMiddleware(rootReducer);
  return store;
}

compose returns a function which has the same signature as the first argument - createStore, then that function is invoked with the second arguments. - reducer and the initial state — Rei Dien, Sep 26 '17 at 08:48
@ReiDien is there any tutorial about this syntax in javascript? — amorenew, Sep 26 '17 at 08:55
i dont have any. maybe just deep understanding on function can help you resolve the complication — Rei Dien, Sep 26 '17 at 09:17

score 1 · Accepted Answer · answered Sep 26 '17 at 15:36

1

Yes! The enhancer()(createStore) syntax is the older-style way of using createStore, and we are trying to encourage people to use the newer syntax instead:

const composedEnhancers = compose(
    firstEnhancer,
    secondEnhancer
);

const store = createStore(
    rootReducer,
    preloadedState,
    composedEnhancers
);

answered Sep 26 '17 at 15:36

markerikson

63,178
10
141
157

do you know any source for javascript function like func1(arg)func2(arg) ? – amorenew Sep 26 '17 at 16:36
1

That's a Functional Programming approach called "currying", or perhaps just a function returning another function. I have links to some [articles on Functional Programming concepts](https://github.com/markerikson/react-redux-links/blob/master/functional-programming.md) that might be useful. – markerikson Sep 26 '17 at 18:58

React Redux with multi applyMiddleware

1 Answers1