I am pretty sure that you would’ve been thinking why some people love react-redux and some people hate it? The answer to the question lies in the fact that react-redux is complex for beginners and needs complex setup for small projects but for large scale projects it works like a charm.Wait, you don’t have to be afraid of the fact that you are a beginner and you’ll hate react-redux, I’m going to convert your hate for react-redux to a love story that you’ll not forget all your life.

What is React-Redux?

To understand what react redux does, we have to understand the concept of state in react. A state is simply a collection of variables to store your data that you can reuse throughout your application.

const [expandProject, setExpandProject] = useState(true);
const [expandCustomer, setExpandCustomer] = useState(false);

This example is using React hooks to initiate state. And the purpose of the state is to tell react to re-render the part of the application depending upon the state change. The method of defining state separately in every HOC (Higher order component) is ineffective because we would’ve needed the same state in other component and then we’d have to pass the state to other component in the component tree.
That’s where react-redux comes to rescue. It uses the concept of store to save all the state at one place and state can be available in any component we need.

When to use React Redux

• When you need global State
• When you need to handle large amount of state at one place
• Debugging can be much easier and simpler

Difference between React-Redux & React Context

React context works by the concept of provider and consumer. A provider provides the context to the react application and the consumer consumes the state of the application and takes decision based on the state. But there is a big drawback, the state has to be passed down to the child where we want to consume the state. Whereas react-redux does not need to pass the state to the child. Child can directly access the state of the application and make decisions according to the state of the application. You can read about react context here in detail.

Getting Started

Start a react project with create react app

create-react-app love-redux
cd love-redux

Install react redux using npm

npm install —-save react-redux

Create a folder with the name of store in src and create a file store in it

const store = createStore(rootReducer, preloadedState, composedEnhancers);

The store is created with root reducer and a preloaded state of the application. Consider it as an initial state of the application. Enhancers are the helpers to work with React redux. For example Redux thunk helps to dispatch actions from anywhere in the application

What are Redux Actions?

Redux actions are the moving parts of the application. It defines the functionality to update the state. For example you want to login a user into application and want every component to know that user is logged In. You’ll dispatch the login action from the login method page and it’ll update the state in store.

Now if you want to dispatch this login action, you just need to call

dispatch(login(data.email, data.password));

It’ll dispatch this action and will update data in store.

What are reducers?

Reducers are the main culprit of react redux. They update the state of your application and every action that is dispatched will update the state in reducer. This way every component in the application will know about the state change and react will update the part of the application that is affected by this state change.

Should you use React-Redux for your next application?

This totally depends on your use-case , if your application is not complex and does only need to handle a few state in your application then redux is not for you. But if you think that your application will grow indefinitely and you’ll have difficulty in managing the state of your application and a lot of components will be updating your state then React-Redux is the best choice for your next application.

If you are new to React then you should definitely read about Angular Vs React Comparison first.

Where do we step in?

We are a team of innovative and passionate people who take pride in helping their clients by creating unique solutions. We build high quality code applications with well structured code and proper testing. We use version Control (Git) to maintain the code and use CI/CD pipeline process to push changes to production.

For more queries and details contact us