REDUX FAQs For Beginners

Abdul Khan
Jan 14 · 2 min read

What is Redux?

Redux according to the official doc’s “is a pattern and library for managing nd updating application state, using events called “actions”” It helps you manage global state. So that you can call &/or update information through out your application.

Redux can be integrated with any front end but is most commonly used with react. With redux since we have a global location where information is stored we don’t have to worry about lifting state up to parent components.

Redux is immutable in nature. any updates to state and object have to be made to the copy of the state or object.

What are actions?

An action is a plain JS object. Actions usually define something thats happening in your application. Actions contain a types and payloads. The types help describe what’s happening and the payload is the actual data being passed.

An action creator is a function that returns an action object.

What are reducers?

A reducer is a function that receives the current state and action and decides hot to update the state if necessary then returns a new state. The reducer listens and based on what action (event) it receives; it will react accordingly.

Reducer are often written as conditionals or switches.

Store — the store is created by creating a reducer and comes with a default value of getState() that returns the current state value.

Dispatch — The redux store comes with a method called .dispatch() which is the only way to update the state and pass in an action object.

Reducers act like event listeners. once something happens that they are interested in that update the state accordingly.

Redux Data Flow:

Initial

  1. A redux store is created using a root reducer function
  2. The store calls the root reducer and saves the return value into initial state.
  3. UI components asses the current state of the redux store and decide what to render.

Updates

  1. Something happens in the app.(a button is clicked)
  2. the app dispatch's an action to the Redux store
  3. The store runs the action and return a copy of the passes state along with any updates as a new state.
  4. The store notifies all the subscribed UI
  5. Each component check to see if there any updates
  6. UI re-renders to reflect any changes.

Conclusion

In conclusion You now know what redux is and have a general idea of how to use redux with your full stack application. Happy Coding!

Nerd For Tech

From Confusion to Clarification

Nerd For Tech

NFT is an Educational Media House. Our mission is to bring the invaluable knowledge and experiences of experts from all over the world to the novice. To know more about us, visit https://www.nerdfortech.org/. Don’t forget to check out Ask-NFT, a mentorship ecosystem we’ve started

Abdul Khan

Written by

A Software Developer

Nerd For Tech

NFT is an Educational Media House. Our mission is to bring the invaluable knowledge and experiences of experts from all over the world to the novice. To know more about us, visit https://www.nerdfortech.org/. Don’t forget to check out Ask-NFT, a mentorship ecosystem we’ve started

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store