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.