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
Leave a comment