ReactJS Redux

  Description

Redux is a predictable state container for JavaScript apps.

• It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test.
• It lets your React Components read data from a Redux store, and dispatch actions to the store to update state.

Projects  

⒈ { Redux Counter,
      Redux Authentication } =
          🏷️{ Managing App-Wide State with Redux }

⒉ Redux ShoppingCart =
          🏷️{ Redux Deep Dive }

---

  Redux Counter & Redux Authentication

Note

Redux is a "State Management System" for Cross-Component or App-Wide State.

• Local State:   State belongs to a single component
  • listening to a User-input via useState & useReducer
• Cross-component State:   State affecting multiple components
  • Open/Close Modal overlay via prop drilling or "React-Context" & "Redux"
• App-wide State:   State affecting the entire App
  • User Authentication via prop drilling or "React-Context" & "Redux"
    
    

For this project, my goal is on Managing App-Wide State with Redux.

Important

Which Concepts in Have I Covered:

  Why would you use Redux?

• React-Context has some potential disadvantages
  1. Complex Setup & Management: Can lead to deeply nested JSX Providers or fat "Context Provider" Components
  2. Performance: It's not optimized for High-Frequency State Changes - Changes that happen more frequently

  How Redux Works?

• Components set up "Subscriptions" to → "Central Store" - They subscribe to the Store
• Then, Components dispatch an → "Action"
• Redux forward that action to → "Reducer Function"
• Reducer Function updates the State in → "Central Data Store"
• Subscribing Components are notified that they can → "Update the UI"

  Redux Basics & Using Redux with React

• Redux is all about having one Central Data(State) Store in your Application.
• Install: npm install redux react-redux
• Creating a Redux Store for React with createStore
• Using Redux Data in React Components via useSelector
• Dispatching Actions From Inside Components via useDispatch
• Redux with Class-Based Components
• Attaching Payloads to Actions
• Working with Multiple State Properties | Counter & showCounter
• Redux Challenges in bigger Apps:
  1. Clashing Identifiers Name
  2. Unmaintainable big Redux File

  Working with Redux Toolkit

• Install: npm install @reduxjs/toolkit
• Adding State Slices using Redux-Toolkit | createSlice: Preparing Global State
• Connecting Redux-Toolkit State to the Store | configureStore: Merging Multiple Reducers into One Reducer
• Migrating Everything To Redux Toolkit | Configure counterActions to Dispatching Actions
• Working with Multiple Slices | authenticationSlice & counterSlice
• Reading & Dispatching From A New Slice | authSlice

Give it a go in real-time and give me a Star     Redux Counter & Authentication

Redux-Counter-Auth.mp4

---

  Redux ShoppingCart

• In the Redux framework, it is imperative that Reducers adhere to the principles of purity, absence of Side Effects, and Synchronicity.
  
  

For this project, My objective pertains to managing Side-Effects and Synchronicity within the context of Redux.

Important

Which Concepts in Have I Covered:

  Handling Async Tasks with Redux

• Install: npm install react-redux & npm install @reduxjs/toolkit
• Creating a Redux-Store and Managing UI-Slice & Cart-Slice

  Where to put Side-Effects & Synchronous Codes

• Inside the Components via useEffect()
  • Using useEffect with Redux to send HTTP Request (PUT)
  • Handling HTTP States & Feedback with Redux
    
    
• Inside the Action Creators
  • We can write our own Action Creators to create Thunk:
    • A function that delays an action until later
    • An action creator function that does not return the action itself but instead another function which eventually returns the action
  • Creating & Using an Action Creator Thunk | sendCartData
  • Creating another Thunk for Fetching Data

  The Redux DevTools

Give it a go in real-time and give me a Star     Redux ShoppingCart

Warning

In certain situations, it might be necessary to employ a VPN due to the utilization of Firebase.

Redux-ShoppingCart.mp4

Find me around the Web