vuex :state-->getters-->組件---dispatch-->action----commit-->mutations--mutate-->state-->getters(計(jì)算屬性)--->組件-.....
Flux
state--->組件---dispatch-->action---->派發(fā)器收到action,修改state---->組件
1.安裝
cnpm i flux --save
2.使用
import { Dispatcher } from "flux"
import events from "events"
//1.初始化數(shù)據(jù) :這樣的state汤功，具備name悲敷、age,而且還有emit() on()
class State extends events{
constructor(){
super()
this.name="妲己";
this.age=20;
}
}
const state = new State()
//3.定義派發(fā)器
const dispatcher = new Dispatcher();
//4.注冊(cè)任務(wù)：約定規(guī)則
//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.導(dǎo)出
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) {
//修改倉(cāng)庫(kù)的數(shù)據(jù)咨油，所以要去派發(fā)提前約定的任務(wù)
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變了况脆，希望組件自動(dòng)渲染
//組件
export default class A extends Component {
componentDidMount() {
store.state.on("change", () => {
this.setState({})
})
}
}
當(dāng)state變了，觸發(fā)自定義事件
case "changeName":
state.name = action.payload;
state.emit("change")
return;
Redux
react---------> react-redux <----------redux---------> redux-thunk<-------------服務(wù)端
1.原則
1.單一數(shù)據(jù)源 store根悼。
2.state是只讀的凶异。
3.修改state只能通過(guò)純函數(shù)進(jìn)行修改。
2.安裝
cnpm i redux --save
3.創(chuàng)建倉(cāng)庫(kù)
import { createStore } from "redux"
//2.初始數(shù)據(jù)
const initState = {
name: "妲己",
age: 20
}
//3.定義reducer函數(shù)
//state:上一次修改完成的state
//action：任務(wù)信息 {type:"changeName",payload:"參數(shù)"}
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.創(chuàng)建倉(cāng)庫(kù)
const store = createStore(reducer)
export default store;
4.基礎(chǔ)語(yǔ)法
組件使用倉(cāng)庫(kù)
import store from "../store"
取數(shù)據(jù)
store.getState()
派發(fā)動(dòng)作
store.dispatch({
type:"changeName",
payload:"王昭君"
})
添加監(jiān)聽
this.unsubscribe = store.subscribe(()=>{
this.setState({})
})
取消監(jiān)聽
this.unsubscribe()
5.redux 狀態(tài)層需要一下幾個(gè)模塊
state挤巡、reducer剩彬、action creator、導(dǎo)出
import { createStore } from "redux"
//1.初始數(shù)據(jù)
const initState = {
name: "妲己",
age:10
}
//2.定義reducer函數(shù)
function reducer(state = initState, action) {
//reducer函數(shù)： mutations 修改數(shù)據(jù)
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函數(shù) 導(dǎo)出數(shù)據(jù) getters
export const getName = (state) => {
return state.name;
}
export const getAge = (state) => {
return state.age;
}
//5.創(chuàng)建倉(cāng)庫(kù)
const store = createStore(reducer)
//監(jiān)聽數(shù)據(jù)
store.subscribe(() => {
console.log(store.getState());
})
export default store;
6.狀態(tài)層 連接 組件層 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)
