foreword
Like vuex in vue, react also has tools for state management. I am learning about this recently, so I will record it here.
What is Redux
Redux is a state container for JS that provides predictable state management. The state container of JavaScript is the container that holds the state. In React, the state is the state. Therefore, what we call the state container of JS is the container that stores the state state. Redux is often used for state management in large projects
Why you need Redux
- It is very difficult for React to manage the ever-changing state. It is necessary to define the state through the constructor, and to modify the state through this.setState.
- React helps us solve the DOM rendering process at the view layer, but State is still left to us to manage. The previously learned components pass value props, context, etc.,
- When we do not use redux, it is more troublesome for us to pass the value of sibling components, and the code is very complicated and redundant.
Use of Redux
- Install
npm init -y
npm i redux -D
- Use
Create a new index.js file, and define the relevant content in index.js. Below I directly write the corresponding comments on the key places, pay attention to remember the three cores in redux: store, action, reducer
// index.js的内容
const redux = require('redux')
// redux有三大块：store、action、reducer
const initState = {
count: 0
}
// 3、reduce 是去连接store和action的
const reducer = (state=initState, action) => {
switch(action.type) {
case 'INCREMENT':
return {
...state, count: state.count + 1}
// 如果没有匹配到任何的action就直接返回state
default:
return state
}
}
// 1、store 保存状态,创建一个store对象即可
const store = redux.createStore(reducer)
// 2、action 是用来修改store的
const action = {
type: 'INCREMENT' }
// 5、在派发action之前可以订阅store的修改,监听store的变化
store.subscribe(() => {
console.log('store被修改了')
})
// 4、派发action
store.dispatch(action)
At this time, let's run index.js with node and it will print out 'store has been modified'.
If we want to get the corresponding state, we can get it in subscribe
store.subscribe(() => {
// console.log('store被修改了')
console.log(`count: ${
store.getState().count}`) // count: 1
})
The concept of pure functions
The reducer is a pure function, we do not need to modify the state directly, we do not modify the count directly. So let's take a look at what a pure function is.
Simply put, a pure function has the following characteristics:
1. The return result of the function only depends on its parameters.
2. The function has no side effects during its execution.
For example, the following example determines whether it is a pure function:
const a = 10
const fn = (b) => a + b
console.log(fn(3))
The return result of fn depends on the values of a and b, so it is not a pure function! The following is rewritten as a pure function
const a = 10
const fn = (x, y) => x + y // 函数的返回结果只依赖于它的参数
console.log(fn(1, 3))
Let's look at another example:
const fnfn = (obj, b) => {
obj.x = 3
return obj.x + b
}
const obj1 = {
x: 1}
console.log(fnfn(obj1, 3))
console.log(obj1.x)
This fnfn function is also not a pure function! Because it has side effects, we define obj.x as 1 in the penultimate line, but the last line prints out 3 because the fnfn function modifies the value of obj.x. Therefore, it is not a pure function. The following is the rewrite of the pure function:
const fnfn = (obj, b) => {
return obj.x + b
}
const obj1 = {
x: 1}
console.log(fnfn(obj1, 3))
console.log(obj1.x)
Summarize
The five steps to using Redux are:
- Create an object as state
- Create Store to store state
- Modify state through action
- Modify the processing code in the reducer
- You can monitor store changes before dispatching actions
This article introduces the basic methods used by Redux, and will continue to introduce the use of Redux in projects and its other features later.