Learn Redux

Redux Store

* Holds application State * Allow access to state via getState() * Allows state tp be updated via dispatch (action) * register listener via subscribe (listener) * handles unregistering of listener via the function returned bu subscribe(listener)

react-redux pattern

Action creator, reducer, provide the store and connect the components.

Action property fetching supplied in async API endpoint

FETCH_USER_REQUEST - fetch all the request FETCH_USER_SUCCESS - fetch successfully FETCH_USER_FAILURE - error fetching data

Redux is predictable in what way?

In redux, all state transition are explicit and it is possible to keep track of them. The changes to your application's state become predictable. ex: to do list app - item (pending) - > item ( completed )

What is Redux?

Redux is a predictable state container for JavaScript apps.

Redux is a state containers

Redux stores the state of the application ​

Redux is for JavaScript Application

Reduxs is not only for react, It can used with react, angular, vue or even vanila Js.

what is react-redux?

a library that provides bindings to use react and redux together in an application

redux middleware

a way to extend Redux with custom, functionality. Provides a third-party extension point between dispatching an action, and the moment it reaches the reducer

Redux Synchronous Action (by default)

as soon as an action was dispatch, the state was immediately updated. useful for small states that doesn't have wait times

Reducer property fetching we supplied to async API endpoint

case: FETCH_USERS_REQUEST loading = true case: FETCH_USERS_SUCCESS loading = false users: data (from api) case: FETCH_USERS_FAILURE loading: false error: error (from api)

Redux Asynchronous API

fetch data from an endpoint and use that data in your application.

why use React + Redux, even React has a state?

help to manage state in a react application. - prevent prop drilling - state is store in a different container rather than on components. ​

to fetch data from an API

install axios whic will handle the fetching insta redux-thunk whic will make our redux behave in an asynchronous way.

Use middleware for :

loggin, crash reporting, performing asynchronous task etc.

Why use redux?

manage the state of your application in a predictable way.

when using connect if you only need to map dispatch to props use:

null for the first parameter commect(null, mapDispatchToProps)(ComponentName)

Redux Fetching API from end point

state action reducer

with react - redux hooks redux v7.1

subscribe to the store and dispatch action without connect ()

useDispatch hook react redux

use to access dispatcher on functional component

useSelector hook react redux

use to access state from redux store

Different Shop Keeper for different State

you must define different reducer for each different state. for scalability, write IceCream.reducer for handling Iceream action and also Cake.reducer for handling cake actions

state property fething supplied on API endpoint

{ loading : true, - for displaying loading on RC data:[], - the data( ex list of users) error - display error }