Nerd For Tech
Published in

Nerd For Tech

REDUX FAQs For Beginners

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!

--

--

--

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/.

Recommended from Medium

Some basic trivia questions I was asked.

Development updates on my network explorer

React/Redux Project: Creating a Gratitude Journaling Application

Architecting TravelFighter’s Frontend

Node.js: 5 Interesting Facts To Know About

Typescript: Five most useful utility types for React

Set a Time Limit on Async Actions in JavaScript

Day 21 of Scrimba JavaScriptmas — Valid Time

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
Abdul Khan

Abdul Khan

A Software Developer

More from Medium

How to deploy a React app to a subdirectory (path based routing)

React Forms and How To Control Them

Some Changes in React Router v6

React — Two must use hooks