We're live-coding on Twitch! Join us! FREE Webinar: Should I use React or Vue?

Important Note

The redux dev tools extension have been updated! As of version 2.7, instead of shipping with a piece of middleware, it now puts a new compose function on the `window.

We just need to make sure to use this __REDUX_DEVTOOLS_EXTENSION_COMPOSE__ function to bring all our store extras together. Instead of what’s in the video, it should look like this:

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(reducer, composeEnhancers(


Let's setup the redux store so we have a central place to keep all our data. In src/app.js, add the following.

import { createStore, applyMiddleware, compose } from 'redux';
import { Provider } from 'react-redux';
import thunk from 'redux-thunk';
import reducer from './reducer';

const store = createStore(reducer, compose(
  window.devToolsExtension ? window.devToolsExtension() : f => f

We are bringing in the redux library along with the react-redux library. We also bring in redux-thunk, which is middleware that will allow us to kick off some asynchronous requests as actions. Then we import our main reducer. We then create a store, using the createStore function. We pass it our reducer, and then use the compose function to create a single function from two other functions. I won't get too much into how it works, but it takes other middleware and returns a single enhancer function from it. We are creating our middleware using the applyMiddleware function and passing it our thunk library. We also setup the dev tools extension that can be downloaded into Chrome from the Chrome web store.

Next we need to wrap our application in the Provider that will make the store available to all our components.

  <Provider store={store}>
    <App />
  , container

We wrap our App in a Provider component and pass our store to it as a prop. Now that the store has been created and passed to our application, the last thing we need to do is create our top level reducer. Create a file at src/reducer/index.js and put the following in it.

import { combineReducers } from 'redux';

export default combineReducers({

Here we are bringing in the combineReducers function from redux. This function takes an object of reducers. A reducer is a simple function. combineReducers will combine these into a single function that operates as our top level reducer function. We will be adding more to this reducer in the future.

If we refresh our browser...nothing has changed. Well, that's because we haven't changed anything that affects the view...yet! In the next video, we will create our first action to grab the characters from the SWAPI.

Like this article? Follow @chrisoncode on Twitter