Rem Zolotykh
Rem Zolotykh

Fullstack Javascript Screencasts

          

Rem Zolotykh
Author

Share


Tags


Twitter


[Blog Post] CRUD with Redux #01. Application and Redux Setup

Rem ZolotykhRem Zolotykh

This is experimental blog post version of first screencast in CRUD with Redux series. Let me know in comments below if it's useful and should I spend time on creating these kind of posts in the future.

In this series of screencasts (and blog posts) we're going to implement simple CRUD application.

We’ll see how to implement this essential feature in isolation. We’ll use create-react-app, react itself, redux for handling app state on client and simple express backend server with mongodb for persistence. So while the example app is small and focused it’s gonna be as real as possible.

In this post we'll create react application and setup redux.

Create New React Application

We'll use create-react-app package to initialize new react application.

First we need to install it globally:

npm install -g create-react-app  

After it's done let's create new application, which we call crud:

create-react-app crud  

And that's it. It’s amazing how easy it became to start with new app thanks to create-react-app.

Now cd into just created application and start server with npm start.

Setup Redux

To setup redux we need to do 3 things:

  1. we need to create store, for that we need to create root reducer
  2. we need to apply all required middlewares to it: in our case we’ll apply thunk middleware to create async actions and redux dev tools middleware to make development easier
  3. we need to wrap our application into <Provider /> tag and supply created store to it

First, let's install all packages we need:

npm install --save redux react-redux redux-thunk  
npm install --save-dev redux-devtools-extension  

And now let's go down to business.

1. Create Redux Store

Let's open index.js file and inside it let's create store. We'll use createStore function which is provided to us by redux package. This function takes several arguments, first of which is root reducer of our application.

./src/index.js

import { createStore } from 'redux';  
import rootReducer from './rootReducer';

const store = createStore(  
  rootReducer
);

We imported and used rootReducer, so let's create new file ./rootReducer.js.

Here we compose the whole application state and we’ll do it with combineReducers function that is provided by redux. We export default result of combineReducers function and this function takes object argument, that describes our state:

./src/rootReducer.js

import { combineReducers } from 'redux';

import games from './reducers/games';

export default combineReducers({  
  games
});

Now let’s create new folder reducers and inside of it new reducer file games.js. Reducer is just a pure function that takes two arguments: state and action objects. And then we switch by action type and by default just return state - in our case right now it always returns empty array.

./src/reducers/games.js

export default function games(state = [], action = {}) {  
  switch(action.type) {
    default: return state;
  }
}

2. Apply Middlewares to the Store

Now that we get store, let’s apply couple of middlewares to it. First one is thunk middleware that allows us to create thunk async actions. And second is redux dev tools middleware that will help us while we develop stuff.

You need to install Redux Dev Tools from Chrome Store. And we already installed redux-devtools-extension package that gives us composeWithDevTools function. Also we need to import applyMiddleware function from redux.

So we import everything we need in index.js file and then provide second argument to createStore function, which is middlewares. And we wrap them in composeWithDevTools function:

./src/index

import { createStore, applyMiddleware } from 'redux';  
import thunk from 'redux-thunk';  
import { composeWithDevTools } from 'redux-devtools-extension';

const store = createStore(  
  rootReducer,
  composeWithDevTools(
    applyMiddleware(thunk)
  )
);

Now you can go to the browser and open redux dev tools, then click on state tab, and you'll see our empty games collection right there in the application state.

screenshot

3. Wrap Application in <Provider /> tag

And the last thing is to import Provider from react-redux package and wrap our application into it. And we need to pass created store to Provider component.

./src/index.js

import { Provider } from 'react-redux';

ReactDOM.render(  
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

And that’s it. We’ve set up redux into our app.

Let me know in comments below if this kind of conent is useful and should I spend time on creating these kind of posts in the future.

Rem Zolotykh
Author

Rem Zolotykh

Comments