Configure react redux middleware from fetch

Question

I have a Redux middleware that requires some data to be configured via a server call (eg, fetch) which is async / requires promises.

However, every example of createStoresuch as this one seems to use a Singleton pattern for the store. This means that the store gets initialized before my fetch is complete. Because it's middleware, I can't "reconfigure" it after createStore is called.

How can i configure createStore without using a singleton pattern to configure middleware?

Dat Tran · Accepted Answer · 2017-05-03 02:18:03Z

1

How do you fetch those data? If it's just a simple API call. You can easily wait for the data to be returned then pass the data to createStore. Something like this:

const fetchData = () => {
  return Promise.resolve({
    data: 'Your data here'
  });
}

const initialState = window.__INITIAL_STATE__;
fetchData()
  .then((data) => {
    initialState.somethingYouNeed = data;
    const store = createStore(initialState);
    // Do the rest here
  });

answered May 3, 2017 at 2:18

Dat Tran

1,5961 gold badge12 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Doug Over a year ago

I am using react-router-redux and it requires a reference to the store to call syncHistoryWithStore. How would I get that store reference to my router? Most cases rely on the singleton implementation to do this.

Dat Tran Over a year ago

Currently, I'm follow this example. Still there are quite a lot issues in the example. But it's a very nice boilerplate. You can find the answer in. github.com/erikras/react-redux-universal-hot-example

Collectives™ on Stack Overflow

Configure react redux middleware from fetch

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related