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

Ahamed Fazil Buhari
 
Senior Developer
August 28, 2018
 
Rate this article
 
Views
2914

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.

clip_image002

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.

clip_image004

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

clip_image006

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

clip_image008

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

clip_image010

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

Category : React, SharePoint, SPFx

Author Info

Ahamed Fazil Buhari
 
Senior Developer
 
Rate this article
 
Ahamed is a Senior Developer and he has very good experience in the field of Microsoft Technologies, especially SharePoint, Azure, M365, SPFx, .NET and client side scripting - JavaScript, TypeScript, ...read more
 

Leave a comment