preface

So far, I have been developing projects using the Vue framework. Since I recently attended the Byte Youth Training camp, the framework I learned in the course was React. I just followed the teacher to learn React and wrote this note

Redux

What is a Redux?

Redux is a global state manager that holds the state and state management logic

As the logic of components becomes more complex, we need to introduce a layer for state management, and Redux is one of those layers, similar to Vuex. Look at this example:Status updates are triggered by clicking events.

Data flow in Redux

Redux takes care of the Action and State parts. When a component needs to change State, it can call the Action provided in Redux and change the State through the Action.

When to use Redux?

Redux is best used when the application is large and complex enough to share state or when components need to share state frequently.

Terminology in Redux

Store: stores the global status

Action: Describes the state change

Dispatch: Sends an Action

Reducer

Calculates the new state based on the current application state and accepted actions.

See the following GIF for the Redux status update process:

Redux Toolkit(RTK)

RTK is an upper-layer encapsulation library based on Redux. Based on common business scenarios, RTK provides a simpler API to simplify the use of Redux.

Create the store

Create a slice

A slice module that contains all the logic needed to manage a substate (state, Actions, Reducer, etc.)

Slice the instance

Reducer must be a pure function

Slice using

Access to the state

Change the state

Where is the state in store?

The complexity of abstraction is not proportional to the benefits:

  1. An API data structure that can be used directly requires an additional 2 layers of transformation
  2. JS simulates the complexity of database table management, and there is no real database tools to do management

Server Status

In most scenarios, API data does not need to be flattened. The synchronization of server data should be handled by the server, not by the front-end and back-end. Caching of API data should be addressed by a dedicated solution.

Other status management schemes

  • RTK Query
  • Recoil
  • Context + Hooks

The last

⚽ This article introduces the concept and use of Redux and related knowledge ~ ⚾ if you are interested in this article welcome to like + collect attention, more wonderful knowledge is waiting for you! 😘 🏀GitHub blogs at github.com/Awu1227. 🏉 I have other columns, please read ~ 🏐 play the beauty of CSS 🎱Vue from giving up to getting started 🎳 simple JavaScript