# My React Learning Note (4)

Firebase ,HOC, Thunk, Sagas

# Firebase

What we did during this session (Forgot to write some codes for this part):

1. Move Shop Data to Firebase with utility function

2. Change App.js to a class based component which can fetch all products data from firebase for later use

3. Create a shop action that updates local state about collections

all products info are in this.state.shop.collections

4. Call this shopaction in componentDidMount of shop.component

Whenever mount the component, we use onSnapshot to listen for snapshot changes or first loading

# WithSpinner

WithSpinner is a HOC which wraps a component and return a new component!

Please see the code regarding this point

or this link: HOC EXPLAIN

# Observable

auth.onAuthStateChanged(nextValue) is a stream observer. This is always listening to auth state

Every time a user’s auth state is changed, currentUser locally is reset

unsubscribeFromAuth is returned by Firebase

## Redux Thunk

We need to load resources on pages that need it rather than loading it at once. We can put all loading process in to Redux.

Then we can dispatch in actions (because of Thunk)

## Redux Sagas (Generator)

A function will run under a certain condition,

Impure function: a function will return different outputs even when the input parameter is same.

Move all these impure function to React Sagas, so that Sagas handle the asynchronous calls.

### Generator

This allows to return

We use yield in Saga for easily cancelling the request during process!

To use sagas, name a function in Sagas with the same name as the redux action call!

Sagas will listen to all same name actions or prepend with on(e.g. onGoogleSignInStart in the same folder

## Why Sagas

https://stackoverflow.com/questions/65271387/when-to-use-redux-saga-and-when-redux-thunk

In my opinion, redux-saga shines if you need to manage the interactions of long-running tasks. For example, I worked on software for set top boxes which needed to manage changing channels. There’s several asynchronous things that need to be done in sequence to start up playback, and then during playback extra things need to be done periodically. Additionally, every step needs to be cancellable in case the user changes channels. Something like that is easy to do with sagas (assuming you’re used to working with them), but comparatively hard with un-cancellable promises.

If you just need to do fairly simple stuff like “when they click a button, download some data”, then both of them do the job just fine. If your cases are fairly simple, i would lean towards redux-thunk because it’s learning curve is easier than redux-saga. Promises are common in the industry, and so many developers are already used to them; while sagas are a fairly specialized piece of code.

Don’t worry about difference in performance. In both cases, there’s only a very small amount of time spent running the library’s code. The bulk of the time will be spent running your code, and while the style of your code will be quite a bit different, the number of things you need to calculate to do a certain job will be very similar.

## take(), takeEvery(), takeLatest()

https://github.com/ZhangMYihua/redux-saga-take-takelatest-takeevery

take(): take only execute one time

takeEvery(): Every action is independent of each other, kick off a new action!

taleEvery is a async way of take in a while loop

takeLatest(): debounce and only wants the latest action to be performed if one is blocked

# Overall review

## Communication between different action!

With Sagas, we can listen to an action from another component in another component Saga! For example, clear all cart items when a user logout success