reactステータス管理プラグインfluxおよびreduxステータスマネージャ

ステータス管理
1.flux
Reactは自分がMVCの中のVの部分であることを標榜し、FluxはMとCを追加する部分に相当する.
FluxはFacebookが使用するフロントエンドアプリケーションのアーキテクチャモデルです.
プロセス:
viewトリガaction
Action通知dispatcher(ディスパッチ)
dispatcher通知倉庫変更状態
storeウェアハウスステータスの変更が完了したら、ページの再レンダリングを通知します.
インストール:

npm i flux --save

ステップ1:倉庫の作成
/src/store/index.js

let state = {
	name:'flux name',
	age:18
}
export default { state }

ステップ2:ページコンポーネントに倉庫を導入し、倉庫のデータを使用する

import React, {
      Component } from 'react'
import store from '../store'
export default class Setting extends Component {
     
	render() {
     
        return (
            <div>
                <h1>      </h1>
                <h3>    name ：{
      store.state.name }</h3>
            </div>
        )
    }
}

この時点では倉庫からしかデータを取得できません
ステップ3:ページからイベントを開始したい場合は、倉庫のデータを変更します.
fluxからDispatcherディスパッチを引き出し、データを変更するディスパッチタスクを登録します.
/src/store/index.js

import { Dispatcher } from 'flux'
let state = {
	name:'flux name',
	age:18
}
let dispatcher = new Dispatcher();
dispatcher.register(action=>{
	switch(action.type){
		case "changeName":
			state.name = action.params
			break;
		default:
			break;
	}
})
export default { state,dispatcher }

Actionは形参ですtypeは、どのようなデータ操作を実行するかを判断するためのカスタム属性です.
​ action.paramsは、データを受信するためのカスタム属性です.
ページコンポーネントでdispatcherを使用して、データを変更するための特定のタスクを配布できます.

import React, {
      Component } from 'react'
import store from '../store'
import User from './User'
export default class Setting extends Component {
     
    setName(){
     
        //               ，           
        store.dispatcher.dispatch({
     
            type:'changeName',
            params:'hello,flux'
        })
    }
    render() {
     
        return (
            <div>
                <h1>      </h1>
                <h3>    name ：{
      store.state.name }</h3>
                <button onClick={
      ()=>this.setName() }>  </button>
                <User />
            </div>
        )
    }
}

この場合、倉庫のデータは変更されますが、ページには変更されません.
倉庫内のデータが変化すると、ページが再レンダリングされます.
/src/store/index.jsイベントリスナーの導入

//      
import {
      Dispatcher } from 'flux'
//        （       ，         ）
import EventEmitter from 'events'
class State extends EventEmitter{
     
    name = 'flux name'
    age = 18
}
let state = new State();
//      
const dispatcher = new Dispatcher();
//         
dispatcher.register(action=>{
     
    //                 
    switch(action.type){
     
        case 'changeName':
            state.name = action.params;
            break;
        case 'changeAge':
            state.age = action.params;
            break;
        default:
            break;
    }
    //      
    state.emit('change')
})
export default {
      state,dispatcher }

ページコンポーネントのマウント完了フック関数で、ウェアハウス内のデータの変化を監視するために使用されます.

import React, {
      Component } from 'react'
import store from '../store'
import User from './User'
export default class Setting extends Component {
     
    setName(){
     
        //               ，           
        store.dispatcher.dispatch({
     
            type:'changeName',
            params:'hello,flux'
        })
    }
    componentDidMount(){
     
        //         
        //               ，        
        store.state.on('change',()=>{
     
            this.setState({
     })
        })
    }
    render() {
     
        return (
            <div>
                <h1>      </h1>
                <h3>    name ：{
      store.state.name }</h3>
                <button onClick={
      ()=>this.setName() }>  </button>
                <User />
            </div>
        )
    }
}

2.redux
Reduxは、2015年にDan Abramovによって作成された科学技術用語です.2014年のFacebookのFluxアーキテクチャと関数式プログラミング言語Elmに啓発されました.すぐに、Reduxはその簡単で学びやすい体積が小さいため、短時間で最も人気のあるフロントエンドアーキテクチャとなっています.
Reduxは主にアプリケーション状態の管理として用いられる.簡単に言えば、Reduxはアプリケーション全体の状態を個別の定数状態ツリー(オブジェクト)で保存し、このオブジェクトを直接変更することはできません.いくつかのデータが変化すると、新しいオブジェクトが作成されます(actionsとreducersを使用します).
reduxコアコンセプト:
​ actions
​ store
​ reducers
reduxの3つの原則:
単一データソース
stateは読み取り専用です
純粋な関数を使用してstateを変更する
(1)取付

npm i redux

(2)基本文法
プロセス:
CreateStoreの導入
初期状態の定義
純関数の定義
倉庫の定義
サンプルコード:
①createStoreの導入
/src/store/index.js

import { createStore } from 'redux'

②初期状態の定義

const initalState = {
    name:'  ',
    age:18
}

③純関数の定義
state前回の変更が完了した状態
Actionはコンポーネントdipatchの動作です
reducerは必ず新しいstateを返さなければなりません.そうしないとstateの変化は検出されません.

function reducer( state = initalState,action ){
     
    switch(action.type){
     
        case 'changeName':
            return{
     
                ...state,
                name:action.params
            }
        case 'changeAge':
            return{
     
                ...state,
                age:action.params
            }
        default:
            return state;//     
    }
}

④倉庫の作成

const store = createStore(reducer);
export default store;

⑤ページコンポーネント使用状態
倉庫に入れる

import store from './store'

ウェアハウス内のデータの使用

    name ：{ store.getState().name }

⑥状態を変える

changeName(){
     
    store.dispatch({
     
        type:'changeName',
        params:'  '
    });
}

⑦サブスクライバによるデータ変更ページの変更

componentDidMount(){
     
    //      ，        ，      
    store.subscribe(()=>{
     
    	this.setState({
     })
    })
}