vuex :state-->getters-->组件---dispatch-->action----commit-->mutations--mutate-->state-->getters(计算属性)--->组件-.....

Flux

state--->组件---dispatch-->action---->派发器收到action,修改state---->组件

1.安装

cnpm i flux --save

2.使用

import { Dispatcher } from "flux"
import events from "events"

//1.初始化数据 :这样的state，具备name、age,而且还有emit() on()
class State extends events{
    constructor(){
        super()
        this.name="妲己";
        this.age=20;
    }
}
const state = new State()

//3.定义派发器
const dispatcher = new Dispatcher();
//4.注册任务：约定规则

//action={type:"changeName",payload:"王昭君"}
//action={type:"changeAge",payload:100}
dispatcher.register((action) => {
    switch (action.type) {
        case "changeName":
            state.name = action.payload;
            state.emit("change")
            return;
        case "changeAge":
            state.age = action.payload;
            state.emit("change")
            return;
        default:
            return;
    }
})

//2.导出
export default {
    state: state,
    dispatcher
}

组件

import React, { Component } from 'react'
import store from "../store/index"
export default class A extends Component {
    componentDidMount() {
        store.state.on("change", () => {
            this.setState({})
        })
    }
    changeName(name) {
        //修改仓库的数据，所以要去派发提前约定的任务
        store.dispatcher.dispatch({
            type: "changeName",
            payload: name
        })
    }
    changeAge(age) {
        store.dispatcher.dispatch({
            type: "changeAge",
            payload: age
        })
        console.log(store);
    }
    render() {
        return (
            <div className="box">
                <h1>this is A</h1>
                <p>name:{store.state.name}</p>
                <button onClick={() => this.changeName('王昭君')}>王昭君</button>
                <p>age:{store.state.age}</p>
                <button onClick={() => this.changeAge(100)}>年龄-100</button>
            </div>
        )
    }
}

state变了，希望组件自动渲染

//组件
export default class A extends Component {
    componentDidMount() {
        store.state.on("change", () => {
            this.setState({})
        })
    }
  }

当state变了，触发自定义事件

    case "changeName":
            state.name = action.payload;
            state.emit("change")
            return;

Redux

react---------> react-redux <----------redux---------> redux-thunk<-------------服务端

1.原则

1.单一数据源 store。
2.state是只读的。
3.修改state只能通过纯函数进行修改。

2.安装

cnpm i redux --save

3.创建仓库

import { createStore } from "redux"

//2.初始数据
const initState = {
    name: "妲己",
    age: 20
}

//3.定义reducer函数
//state:上一次修改完成的state
//action：任务信息 {type:"changeName",payload:"参数"}
function reducer(state = initState, action) {
    switch(action.type){
        case "changeName":
            state.name=action.payload;
            return state;
        case "changeAge":
            state.age=action.payload;
            return state;
        default:
            return state;
    }
}

//4.创建仓库
const store = createStore(reducer)

export default store;

4.基础语法

组件使用仓库

import store from "../store"

取数据

store.getState()

派发动作

store.dispatch({
    type:"changeName",
    payload:"王昭君"
})

添加监听

this.unsubscribe = store.subscribe(()=>{
    this.setState({})
})

取消监听

this.unsubscribe()

5.redux 状态层需要一下几个模块

state、reducer、action creator、导出

import { createStore } from "redux"

//1.初始数据
const initState = {
    name: "妲己",
    age:10
}

//2.定义reducer函数
function reducer(state = initState, action) {
    //reducer函数： mutations 修改数据
    switch (action.type) {
        case "changeName":      
            return {
                ...state,
                name:action.payload
            };
        case "changeAge":
            return {
                ...state,
                age:action.age
            }
        default:
            return state;
    }
}
//3.action creator
export const changeNameAction = (name) => {
    return {
        type: "changeName",
        payload: name
    }
}
export const changeAgeAction= age =>{
    return {
        type:"changeAge",
        age:age
    }
}
//4.reselector函数 导出数据 getters
export const getName = (state) => {
    return state.name;
}
export const getAge = (state) => {
    return state.age;
}
//5.创建仓库
const store = createStore(reducer)


//监听数据
store.subscribe(() => {
    console.log(store.getState());
})


export default store;

6.状态层 连接 组件层 react-redux

1.安装

cnpm i react-redux --save

2.在入口文件将store注入到Provider组件中

import store from "./store"
import {Provider} from "react-redux"

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>
  ,
  document.getElementById('root')
);

3.将组件定义为容器型组件，容器型组件只能是类定义组件。

import React,{Component} from "react"
import {connect} from "react-redux"
class D extends Component {
    render(){
        const {name,changeName}=this.props
        return (
            <div>
                <p>{name}</p>
                <button onClick={()=>changeName('貂蝉')}>貂蝉</button>
            </div>
        )
    }
}
const mapStateToProps=(state)=>{
    return {
        name:getName(state),
    }
}
const mapDispatchToProps=(dispatch)=>{
    return {
        changeName:(name)=>dispatch(changeNameAction(name))
    }
}
export default connect(mapStateToProps,mapDispatchToProps)(D)