Setting up the project

Having understood the concept of Redux, let's get started with the project that we promised to work with. We will continue to use the project from the getting-started section to build the other components required for the project. Throughout this entire book, we will develop a multilingual hospital management system. Of course, the development of a complete hospital management system is out of the scope of this book, but we are going to get started with a simple one. We are going to have an authentication system and a CRUD (Create, Read, Update, and Delete) of users to get started with.

Configuring the store

Since we know what a store is in Redux, let's get started with creating a store file. We can keep our store in a separate file. Let's call it configureStore.js:

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

import createReducer from "./reducers";

export default function configureStore(initialState = {}, history) {
 const store = createStore(
   createReducer(),
 );

 // Extensions
 store.injectedReducers = {}; // Reducer registry

 return store;
}

Configuring the root reducer

Our root reducers can reside in a reducers.js file. We are going to use the combinedReducers utility function from the Redux library:

import { combineReducers } from "redux";

import history from "utils/history";

export default function createReducer(injectedReducers = {}) {
 const rootReducer = combineReducers({
   ...injectedReducers
 });
 return rootReducer;
}

Configuring our app with Redux

This is the main file, app.js, which will be the main entry file for our project. We are going to put the file inside of app/app.js. You can see that we are using some of the npm packages, including @babel/polyfill, react, react-dom, react-redux, and sanitize.css:

// Needed for redux-saga es6 generator support
import "@babel/polyfill";

// Import all the third party stuff
import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import history from "utils/history";
import "sanitize.css/sanitize.css";

// Import root app
import App from "containers/App";

import configureStore from "./configureStore";

// Create redux store with history
const initialState = {};
const store = configureStore(initialState, history);
const MOUNT_NODE = document.getElementById("app");

const render = () => {
 ReactDOM.render(
   <Provider store={store}>
       <App />
   </Provider>,
   MOUNT_NODE
 );
};

render();

Let's briefly go over these packages, as follows:

• @babel/polyfill (https://babeljs.io/docs/en/babel-polyfill): Babel polyfill has a polyfill that contains a custom regenerator runtime and core-js. In other words, it allows us to consume the full set of ES6 features, beyond syntax changes, including built-in objects like Promises and WeakMap, as well as new static methods, like Array.from or Object.assign.
• react: We already know what React is. We are going to dive deeper into creating React components in Chapter 6, Extending Redux by Middleware.
• react-dom: React DOM helps us to glue React and the DOM. When we want to show our React components on the DOM, we need to utilize this ReactDOM.render() function from React DOM. We will discuss these features more in the upcoming chapters.
• React-redux: This allows us to communicate, in both ways, between React and Redux (https://github.com/reactjs/react-redux). It is a binding between React and Redux that allows us to create containers and listen to the store changes, reflecting that into a presentational component. We will explore container components (smart components) and presentational components (dumb components) in more detail in upcoming chapters.
• Sanitize.css (https://github.com/csstools/sanitize.css): This is one of the cascading style sheet libraries that yield consistent, cross-browser default styling of HTML elements, as well as useful defaults.

Creating utilities

We used a history object in app.js. We can create history.js inside of the utils folder and create an instance of history. You can learn more about history from https://github.com/ReactTraining/history. In a nutshell, the history library manages the session history everywhere that JavaScript runs:

import createHistory from "history/createBrowserHistory";
const history = createHistory();
export default history;

Creating the first container

Let's create our first container component, inside of app/containers/App/index.js:

import React from 'react';
import HomePage from 'containers/HomePage/Loadable';
export default function App() {
 return (
   <div>
     <HomePage />
   </div>
 );
}

The home page container contains two files, Loadable.js and index.js:

import loadable from 'loadable-components';
export default loadable(() => import('./index'));

The index.js is as follows:

import React, { PureComponent } from 'react';
/* eslint-disable react/prefer-stateless-function */
export default class HomePage extends PureComponent {
 render() {
   return <h1>This is the HomePage Redux-book container!</h1>;
 }
}

The complete code for this project can be found in the GitHub repository, inside of the CH01 starter files. We are going to continue using it in other chapters. Once you have these files up in your editor, we can start to run our first application. To run the application, the first thing to do is install the npm dependencies, as follows:

yarn install
yarn run

The application should start at http://localhost:8080/.