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 }