Getting Started with React and Redux: Lesson 3 of 10

Setting up the Redux Store

Up Next

Getting our Characters

Autoplaying in 7 seconds!

Cancel

Create a Free Account to Watch

There are lessons in this course. of learning!

Sign Up Now

Login to your account

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(
  applyMiddleware(thunk),
));

Notes

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(
  applyMiddleware(thunk),
  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.

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>
  , 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.

Chris Sevilleja

Co-founder of Scotch.io. Slapping the keyboard until something good happens.