Everyone knows and loves React and Redux. So before we understand Redux Setup Let’s first understand ........
What is Redux?
Redux is a predictable state container designed to help you write JavaScript apps that behave consistently across client, server, and native environments and are easy to test.
With Redux, the state of your application is kept in a store, and each component can access any state that it needs from this store.
Redux allows you to manage your app’s state in a single place and keep changes in your app more predictable and traceable. This is particularly helpful if the app is going to scale as managing too many states and communicating between components (state management) becomes tougher.
Setup and Installation
Let’s look into how one can use Redux with React
Using Create React App
npx create-react-app my-app --template redux
Using in an existing React App
#Using npm
npm install react-redux
#Using Yarn
yarn add react-redux
Let’s first understand how Redux works and Flow In Redux App 🤩
Knowing Redux 🤔
Before starting to use Redux this should be kept in mind that
- Redux works on basic 3 Principles
- Single source of truth: Entire state of the app is stored in the global store.
- State is read-only: i.e you can never mutate a state whenever you mutate a state it has to be changed via dispatch actions. Actions will be then handled by reducers.
- All the changes are made with pure function using reducers i.e behavior of the function is not going to change by varying input it.
Flow in Redux App 🤠
- Scenario: We have a React component that is ready to change state.
- The first step which happens when React Component tries to change state is by dispatching actions (adding todos, deleting todos).
- Action has type and payload it is an object.
- The next step after the action is dispatched Middleware is called the purpose of which is to make necessary API, async calls which are then needed to perform state updates.
- For updating states of the actions dispatched if you need some APIs then it is called in middleware. The main function of middlewares is to dynamically load js files or API calls.
- After middlewares reducers are called they are responsible for updating states.
- They take the old state to apply the action ( take the payload and apply it ) and then generate a new state.
- Output to the reducer is a new state which updates the Redux store.
Here is an image to show you the flow of state updation using Redux
- Redux dev tools to see all the actions at one global store
Step 1 🥳 Creating Components Folder for React
Keeping in mind the react best practices it’s imperative to make a React components folder. Inside it, each js file will represent a component.
This is an example image for structuring components under /src folder.
To understand the directory structure of React and its uses this article can be followed which is written by pankaj basuri
Best Practice To Manage Folder Structure For React.js
Step 2 😋Create a Redux Folder
Within the /src create a folder Redux which will have .js files for action, middleware, store, reducer, and initial state. These are the basic structures of any Redux Project.
- actions.js: It is used to dispatch actions as string names.
- initial-state.js: It stores the initial state when the app loads.
- middleware.js: It will handle asynchronous operations.
- store.js: It is bound to applications and stores the states globally.
- reducer.js: It handles updating of state from old to new. It is a pure function.
Step 3 😉 Updating index.js
In index.js, ReduxApp is created for connecting Redux, and Provider is imported from react-redux. Also to act as store provider which we have created using provider we are binding the store to our application importing store from store.js
In ReduxApp then we are using the store as our context and we wrap everything inside the Provider tag importing Todos from app.js.
Step 4 🤗 Creating and importing libraries in store.js
For populating the state and we need to create a middleware and bind the middleware.
We import packages in store alongside reducer and middleware and created a saga middleware using createsagaMiddleware. We create a store using createStore API and then using saga middleware we pass middleware and reducer, we are wrapping it in chrome dev tools.
Then we need to call the saga middleware and run it to make it work
Step 5 😇Creating Actions in action.js and defining initial states in initial-state.js
We define actions in action.js
Then we define an initial state in form of an object in initial-state.js.
Step 6 😍 middleware.js for async operations
We handle async operations using generator functions in middleware.
In this way, we can setup a Redux Project, and then we can start with Redux 😉. So what are you waiting for Get, Set, Go.
