Redux Core
Introduction to Redux
Redux is a JavaScript state container that provides predictable state management.
Redux workflow
Actions: Object, describing how to operate on the state
Reducer: function, operates on state and returns new state
Store: container for storing state, JavaScript object
View: view, HTML page
React 16 uses Redux
Install
npm install --save redux
Create a store warehouse
src
Create a store
folder under the directory, and then create a file under the index.js
folder
import { legacy_createStore as createStore } from "redux";
import reducer from "./reducer";
const store = createStore(reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()) // 创建数据存储仓库
export default store
Create a file under store
the folderreducer.js
const defaultstate = {
list: [1,2,3,4,5,6],
inpuValue: ''
}
export default (state = defaultstate) => {
return state;
}
use in the page
src
Create TodoList.js
a page in the directory
in constructor
the introduction
this.state=store.getState();
use
this.state.list
dispatch
Modify the value inside by
store.dispatch({
type: 'changeList',
value: newList
})
reducer.js
Add the corresponding method in
const defaultstate = {
list: [1,2,3,4,5,6],
inpuValue: ''
}
export default (state = defaultstate, action) => {
switch(action.type) {
case "changeList":
return {
...state,
list: action.value
}
default:
return state;
}
}
constructor
Add subscription status to Redux
this.storeChange = this.storeChange.bind(this)
store.subscribe(this.storeChange)
writing storeChange
method
storeChange(){
this.setState(store.getState())
}
Complete code
import React, { Component } from 'react';
import store from './store'
class TodoList extends Component {
constructor(props){
super(props)
this.state=store.getState();
this.storeChange = this.storeChange.bind(this)
store.subscribe(this.storeChange)
}
handleChange(){
this.setState({
inputValue:this.inputRef.value
})
}
handleAdd() {
let newList = this.state.list
newList.push(this.inputRef.value)
store.dispatch({
type: 'changeList',
value: newList
})
this.setState({
inputValue: ''
})
}
handledel(index) {
const list = this.state.list
list.splice(index, 1)
store.dispatch({
type: 'changeList',
value: list
})
}
storeChange(){
this.setState(store.getState())
}
render() {
return (
<div>
<div>
<input ref={(inputRef)=>{this.inputRef=inputRef}} value={this.state.inputValue} onChange={handleChange.bind(this)} />
<button onClick={handleAdd.bind(this)}>新增</button>
</div>
{this.state.list.map((item, index) => {
return (<div key={index}><p>{item}<span onClick={() => handledel(index).bind(this)}> 删除</span></p></div>)
})}
</div>
);
}
}
export default TodoList;
React 18 uses Redux
Installation and creation of warehouse are the same as in 16
use
Import normally and use a variable to receive
import store from './store'
const state = store.getState()
When using it, you can use it directly by state.xxx
const items = state.list.map((item, index) => {
return (<div key={index}><p>{item}<span onClick={() => handledel(index)}> 删除</span></p></div>)
})
Revise
Same as dispatch
store.dispatch({
type: 'changeList',
value: list
})
In order for the page to update in real time, it must be updated manually
Use react
the built-in useEffect
method to subscribe
monitor the store update function
useEffect(() => {
// store.subscribe()是redux提供的,监测store更新的函数
store.subscribe(() => {
// 当store数据更新后执行 setUpdate() ,组件重新加载,实现界面store数据更新
setUpdate({})
})
})
const [update,setUpdate] = useState({})
Complete code
import React, { useRef, useState, startTransition, useEffect } from 'react';
import store from './store'
const TotoList = () => {
const inputRef = useRef()
const state = store.getState()
const [update,setUpdate] = useState({})
const [value, setValue] = useState('')
const items = state.list.map((item, index) => {
return (<div key={index}><p>{item}<span onClick={() => handledel(index)}> 删除</span></p></div>)
})
const handleChange = () => {
startTransition(()=> {
setValue(inputRef.current.value)
})
}
const handleAdd = () => {
let newList = state.list
newList.push(inputRef.current.value)
store.dispatch({
type: 'changeList',
value: newList
})
setValue('')
}
const handledel = (key) => {
const list = state.list
list.splice(key, 1)
store.dispatch({
type: 'changeList',
value: list
})
}
useEffect(() => {
// store.subscribe()是redux提供的,监测store更新的函数
store.subscribe(() => {
// 当store数据更新后执行 setUpdate() ,组件重新加载,实现界面store数据更新
setUpdate({})
})
})
return (
<div>
<div>
<input ref={inputRef} value={value} onChange={handleChange} />
<button onClick={handleAdd}>新增</button>
</div>
{items}
</div>
)
}
export default TotoList;