Skip to content

rjritik1137/redux-from-scratch

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

28 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

  1. You can look how you can make you own basic redux implementation using context API.

  1. I have created a connect function with takes two parameters like redux using that your component can subscribe to redux store.

  1. You can also use useSelector and useDispatch hooks if you want for your functional component instead of connect, but connect will be required for class components.

  1. To initialise a store, use createStore. It takes your reducer and initial state. It will create a store for you, that you can use for your application.

  1. If you want to have multiple reducer, you can pass all of your reducers to combineReducer as an object, and it will give you a single reducer with it's initial state, following that, you can pass these to createStore to create your store.

  1. On top of everything, there is a provider at the root level, created from the useContext api given by react, that will provide the access of your store to all of its consumers using connect, and hooks.

  1. Your component will only re-render if the subcribed data changes for your component changes in the store.





useSelector Hook

  • You can use it to extract the part of the store for your component.
  • It expects a selector function(should be pure and same in each render, or should be wrapped with useCallback hook) from your component to extract the state from the redux store.
  • You can pass a equality function for your state comparison, if your state changes based on your equality function your component will re-render.
  • It uses useState hook internally, there it has the initial state from the store, and in useEffect we have subscribed to the redux.
  • Whenever something changes in the store, this subcriber will execute, and it compares the previous and current reference of your state. If there is a change in reference, it re-renders your component.
  • Unsubscriber returned from the subscribe function will unsubcribe from the redux, whenever your component unmounts/change in dependency array. i.e. (state, selector function, subscribe function)

useDispatch Hook

  • It gives you a dispatch function, that you can call with an action, containing a type and a payload to update the redux store.

connect function

  • It expects two parameter (mapStateToProps, mapDispatchToProps), that you can use to have your state from the redux, and dispatch action as a props to your component. This will return an higher order function to which you need to pass your component.
  • on every update in redux, mapStateToProps will do the shallow compare of your newState and previous state, if they comes out different. Your component will re-render.

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published