Redux Introduction

In notebook:
FrontEndMasters Intermediate React
Created at:
2019-06-25
Updated:
2019-08-15
Tags:
React libraries JavaScript

https://frontendmasters.com/courses/intermediate-react-v2/redux-introduction/

About Redux

In this workshop the Redux part is shorter, mainly because it's becoming less and less relevant since we have a solid Contxt API and also useReducer.

Brian is no longer using Redux professionally. He doesn't have a good use case to use Redux, but there are still a lot of codebases that use Redux.

A good use case for Redux

If you have a lot of asynchronous code in your app, for example making dozens of API calls. He mentions sagas as good use case. There are other courses on frontendmasters that teach more on Redux and state management.

Even Dan Abramov the creator Redux, says that he doesn't use them much anymore.

What is Redux for?

Have a state store on the side. For example a user object that used across several components. A central repository for the state of your application.

The steps of a Redux circle,

original source

1 User types in input box 2 Call action creator to get an action 3 Dispatch action to Redux 4 Redux inserts the action into the root reducer 5 The root reducer delegates that action to the correct reducer 6 The reducer returns a new state given the old state and the action object 7 That new state becomes the store's state 8 React is then called by Redux and told to update

Benefits

Every step of this is testable.

Start

You can use Redux with other frameworks such as Angular or Ember, or even without a framework. It's a very small library, it's only about 50 lines of code.

npm i redux react-redux