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.
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; }
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; }
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 andcore-js
. In other words, it allows us to consume the full set of ES6 features, beyond syntax changes, including built-in objects likePromises
andWeakMap
, as well as new static methods, likeArray.from
orObject.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 thisReactDOM.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.
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;
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/
.