banner
他山之石

他山之石

HomeArchives

Understanding Redux

#React#Redux23
AI Translation
This post is translated from Chinese into English through AI.View Original
AI-generated summary
This article provides an introduction to Redux, a JavaScript state container for managing complex state in web applications. Redux focuses on state management and decouples it from React. It follows three principles: a single state tree, where the entire application state is stored in one object; state is read-only and can only be changed by triggering actions; and modifications to state are executed using pure functions called reducers. Actions are JavaScript objects that describe events, and reducers calculate new state based on the action and current state. The store is responsible for maintaining the application state, providing methods to get and update state, and registering listeners. Redux applications have a single store and follow a data flow consisting of dispatching actions, calling reducers, and updating the state. This article provides a basic overview of Redux concepts and promises to cover its usage in future articles.

Understanding Redux

title: Understanding Redux
date: 2018-02-06 14:30:55
banner: https://cdn.statically.io/gh/YanYuanFE/picx-images-hosting@master/20231128/stock-photo-245270081.750kwnzhcyk0.webp
tags:

  • React
  • Redux

The core idea of Redux is that a web application is a state machine, and the view is one-to-one with the state.

image

In the past year, I have been using React-related technology stacks for work. It took me a lot of effort to understand Redux at first, and I have always wanted to write a tutorial about Redux. Now, I finally started.

Why use Redux#

Redux was created to solve complex state management in JavaScript. When your application becomes large and needs to handle complex interaction scenarios, you can try using Redux. If you use React, if you need to share state among many components, if you need to handle asynchronous operations, if a component's state change needs to update other components, you may need Redux.

Introduction#

Redux is a JavaScript state container that provides predictable state management.

Redux focuses on state management and decouples it from React.

Redux can be described by these three basic principles:

  • Single source of truth

The entire application's state is stored in a single object tree, which exists in a single store.

  • State is read-only

The only way to change the state is by triggering an action, which is a plain object that describes the event that occurred.

  • Changes are made with pure functions

To describe how actions change the state tree, you need to write reducers.

Action#

An action is essentially a plain JavaScript object. Redux conventionally requires that actions have a type field, which is a string that represents the action to be performed. In most cases, the type is defined as a string constant. As the application grows, it is recommended to store actions in separate modules or files.

In Redux, you can initiate a dispatch process by passing the result of an action creator function to the dispatch() method. You can directly call dispatch() method using store.dispatch() in the store.

Reducer#

Reducers calculate the new state based on the incoming action and the current state.

A reducer is a pure function that takes the old state and an action as parameters, and returns a new state. As long as the input parameters are the same, the next state will always be the same. There are no special cases, no side effects, no API requests, and no variable modifications. It is purely for computation.

  1. Do not modify the state in the reducer, but return a new object. You can use Object.assign() to create a new copy. Do not use it like this:
Object.assign(state, { visibilityFilter: action.filter })

The above code will change the value of the first parameter. You must set the first parameter to an empty object. You can also enable ES7 and use the object spread operator, { ...state, ...newState }, to achieve the same result.
3. Return the old state in the default case. When encountering an unknown action, always return the old state.

Store#

The store is a container that holds the application state and calls the reducer when you dispatch an action.
The store is the object that connects them together. The store has the following responsibilities:

  • Maintaining the application state
  • Providing the getState() method to retrieve the state
  • Providing the dispatch(action) method to update the state
  • Registering listeners through subscribe(listener)
  • Unsubscribing listeners through the function returned by subscribe(listener)

A Redux application has only a single store. When you need to split the data processing logic, you should use multiple reducers combined instead of creating multiple stores.

Data Flow#

The lifecycle of data in a Redux application follows these four steps:

  1. Call store.dispatch(action).

You can call store.dispatch(action) anywhere, including in components, XHR callbacks, or even timers.

  1. The Redux store calls the reducer function passed in.

The store passes two parameters to the reducer: the current state tree and the action.

  1. The root reducer should combine multiple child reducers into a single state tree.

  2. The Redux store saves the complete state tree returned by the root reducer.

Summary#

This article only covers some concepts and basic introductions about Redux. Next time, we will explore its basic usage.

Loading...
Ownership of this post data is guaranteed by blockchain and smart contracts to the creator alone.