Detailed explanation of the relationship between React and Redux

Documentation: Redux Chinese Documentation

The official Redux documentation defines Redux as: a predictable JavaScript application state management container.

1. The relationship between redux and react

Redux does not only provide state management for react applications, it also supports other frameworks.

React is an abstraction layer for DOM (UI library), not a complete solution for web applications. Therefore, react is more complicated when it comes to data processing and communication between components.

For large and complex applications, these two aspects are precisely the most critical. Therefore, it is difficult to write large applications using only React.

Advantages of redux:

Centrally store and manage application status

When dealing with component communication issues, ignore the hierarchical relationship between components

Simplify communication between components in large and complex applications

The data flow is clear and it is easy to locate bugs

2. React multi-component sharing

Extract the states of all components and construct a centralized state tree by analogy with the React component tree. This state tree corresponds one-to-one with the React component tree, which is equivalent to stateful modeling of the React component tree:

├── src
   ├── store # redux directory, generally called store
   │ ├── index.js # Define and export the store. The reducer will be imported
   │ └── reducer # reducer function ├── App.js # root component, import Father and Uncle components 

1. Redux can ignore the component hierarchy

2. For the component system, redux is a third-party, global "variable"

3. Three core concepts of redux

Core concepts: store , action , reducer

1. store

Store is a warehouse, the core of Redux, integrating action and reducer, similar to the store of vuex

Features:

• An application has only one store
• Maintain the application status and obtain the status: store.getState re.getState()
• When creating a store, receive the reducer as a parameter: const st store = createStore(reducer)
• When initiating a status update, you need to dispatch action：store.dispatch(action)

import { createStore } from 'redux'
// Create a store
const store = createStore(reducer)

2. action

action is a js object with two properties:

type : Identifies the attribute, and its value is a string. Multiple types are separated by actions

payload : data attribute, optional. Indicates the data carried by this action

Features:

• Just describe what to do
• JS object, must have a type attribute to distinguish the type of action
• Depending on the function, additional data can be carried to complete the corresponding function.

const action1 = { type:'addN', payload: 12 }
//store.dispatch(action1)
 
const action2 = { type:'add', payload: 1 }

3. Reducer (pure function)

effect:

1. Initialization state

2. Modify status

Modify state: return a new state based on the old state and action passed in

initState = 0
function reducer(state = initState, action) {
  return state
}

Summarize

This article ends here. I hope it can be helpful to you. I also hope you can pay more attention to more content on 123WORDPRESS.COM!