Reduxコア
Redux の概要
Redux は、予測可能な状態管理を提供する JavaScript 状態コンテナーです。
Reduxワークフロー
アクション: 状態の操作方法を記述するオブジェクト
Reducer: 状態を操作して新しい状態を返す関数
Store: 状態を保存するためのコンテナ、JavaScript オブジェクト
ビュー: ビュー、HTML ページ
Redux を使用した React 16
インストール
npm install --save redux
店舗倉庫を作成する
ディレクトリの下にフォルダーをsrc
作成し、そのフォルダーの下にファイルを作成しますstore
index.js
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
store
フォルダーの下にreducer.js
ファイルを作成します
const defaultstate = {
list: [1,2,3,4,5,6],
inpuValue: ''
}
export default (state = defaultstate) => {
return state;
}
ページ内で使用する
ディレクトリ内にページsrc
を作成するTodoList.js
導入constructor
_
this.state=store.getState();
使用
this.state.list
dispatch
内部の値を次のように変更します
store.dispatch({
type: 'changeList',
value: newList
})
reducer.js
対応するメソッドを追加します
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;
}
}
Reduxにサブスクリプション ステータスconstructor
を追加する
this.storeChange = this.storeChange.bind(this)
store.subscribe(this.storeChange)
書き方storeChange
_
storeChange(){
this.setState(store.getState())
}
完全なコード
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 は Redux を使用します
倉庫の設置と作成は16と同様
使用
通常どおりインポートし、変数を使用して受け取ります
import store from './store'
const state = store.getState()
使用する場合はstate.xxxで直接使用できます。
const items = state.list.map((item, index) => {
return (<div key={index}><p>{item}<span onClick={() => handledel(index)}> 删除</span></p></div>)
})
改訂
派遣と同じ
store.dispatch({
type: 'changeList',
value: list
})
ページをリアルタイムで更新するには、手動で更新する必要があります
react
組み込みuseEffect
メソッドを使用してsubscribe
ストア更新機能を監視する
useEffect(() => {
// store.subscribe()是redux提供的,监测store更新的函数
store.subscribe(() => {
// 当store数据更新后执行 setUpdate() ,组件重新加载,实现界面store数据更新
setUpdate({})
})
})
const [update,setUpdate] = useState({})
完全なコード
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;