react 状态管理插件flux 和redux 状态管理器

深藏阁楼爱情的钟 2022-12-05 10:22 226阅读 0赞

## 状态管理 ##

### 1.flux ###

React 标榜自己是 MVC 里面 V 的部分，那么 Flux 就相当于添加 M 和 C 的部分。

Flux 是 Facebook 使用的一套前端应用的架构模式。

流程：

view 触发action

action通知dispatcher（派发器）

dispatcher通知仓库修改状态

store仓库修改完状态后，通知页面进行重新渲染

安装：

npm i flux --save

第一步：创建仓库

/src/store/index.js

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

第二步：在页面组件中引入仓库，并使用仓库中的数据

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>
            )
        }
    }

此时只能从仓库中获取数据

第三步：如果想通过页面发起一个事件，来修改仓库中的数据。

从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是一个形参，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由Dan Abramov在2015年创建的科技术语。是受2014年Facebook的Flux架构以及函数式编程语言Elm启发。很快，Redux因其简单易学体积小在短时间内成为最热门的前端架构。

Redux最主要是用作应用状态的管理。简言之，Redux用一个单独的常量状态树（对象）保存这一整个应用的状态，这个对象不能直接被改变。当一些数据变化了，一个新的对象就会被创建（使用actions和reducers）。

redux核心概念：

actions

store

reducers

redux三个原则：

单一数据源

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'

使用仓库中的数据

<p>仓库中的name为：{ store.getState().name }</p>

⑥改变状态

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

⑦使用订阅者实现数据变化页面就变化

componentDidMount(){ 
        //仓库数据变化，想要重新渲染页面，就添加订阅者
        store.subscribe(()=>{ 
        	this.setState({ })
        })
    }