How to use Redux in React (Typescript) – Adding Important packages

Hello readers, this is continuation of my previous article on Introduction To Redux – Technical Definitions For Beginners. In this article we will focus on How to make use of Redux in your React application. Let’s go through by simple react application. I believe you already setup the environment for your react application (node, npm everything is installed). By the time I write this article I have npm v5.6.0 and node v8.9.1. Maybe it will be having higher version at the point of time you are reading this article.

Here I am using Visual Studio Code which is one of the best IDE for react applications especially when you use Typescript. Run the below command to create new react application and it takes few minutes to install all necessary packages. Make sure you ran npm install create-react-app at least once in your system globally.

And run create-react-app simple-redux-react to create your application. In my case application name is simple-redux-react

Navigate to your application folder and run npm start to test everything is working fine.

Now, Install redux packages in your application and some dev dependencies.

npm install –save redux react-redux redux-thunk redux-promise-middleware

npm install –save-dev redux-logger @types/redux-logger @types/react-redux @types/redux-promise-middleware redux-devtools-extension

npm install –save-dev redux-devtools-extension, this will be useful during development and helps to track redux stores in Google Chrome

Now we need to take care of 3 important things – store, reducer and action.

To connect your store with your react application, then we need to wrap your entire react component inside <provider>. This makes the store available to the components inside this <provider> and if you want your component to talk with Store then we need to use connect() function

 const rootElement = document.getElementById("root") as HTMLElement;
 ReactDOM.render(
   <Provider store={storeObj}>
       <div>
         <App />
       </div>
   </Provider>,
   rootElement
 );
 

Creating Store:

 // Creating Store
 const storeObj = createStore(
   allReducers,
   !initialState,
   applyMiddleware(logger)
 );
 

In the next article I will share the knowledge about folder structure that helps for developers and adding necessary packages. Thank you for reading

Happy Coding

Ahamed