【前端框架】——React——状态管理（redux）

状态管理——安装

安装：
npm install react-redux --save
npm install redux --save

状态管理——Store创建操作

利用createStore(reducer, [initialState], enhancer)
---------------reducer (Function): 接收两个参数，分别是当前的 state 树和要处理的 action，返回新的 state 树
--------------- [initialState] (any): 初始时的 state

import { createStore } from 'redux'
const defalut = {
  count: 0
}
const store = createStore((state=defalut, action) => {
    /**
     * reducer处理逻辑
     * reducer会入参（1）一个最新的state用于新对象的模板
     * reducer会入参（2）一个请求action（reuqest对象），用于针对type做不同逻辑处理以及用业务参数做处理
     * reducer会返回：：一个新的state对象用于更新缓存中的state
     */
    switch (action.type) {
        case "/user/increment":
            return {
                ...state,//合并以前的state
                count:state.count+action.payload.count//拓展新的state对象字段，如果旧字段存在就更新
            };
        case "/user/decrement":
            return {
                ...state,
                count:state.count-action.payload.count
            };
    }
})
export default store

状态管理——Store交互操作

用户端利用dispatch发起请求
type：请求路径
payload：请求参数的封装

发起请求——dispatch

function HooksRedux() {
    const [count, setCount] = useState(0)
    return (
        <div>
            <h1>HooksRedux父组件:{count}</h1>
            <button onClick={() => Store.dispatch({ type: "/user/increment",payload:{count: 5}  })}>+</button>
            <button onClick={() => Store.dispatch({ type: "/user/decrement",payload:{ count: 5 }})}>-</button>
            <Child></Child>
        </div>
    )
}
export default HooksRedux

监听数据——subscribe

function HooksRedux() {
    const [count, setCount] = useState(0)
    /*
      监听状态
     */
    Store.subscribe(()=>{
         setCount(Store.getState().count)
    })
    return (
        <div>
            <h1>HooksRedux父组件:{count}</h1>
            <button onClick={() => Store.dispatch({ type: "/user/increment",payload:{count: 5}  })}>+</button>
            <button onClick={() => Store.dispatch({ type: "/user/decrement",payload:{ count: 5 }})}>-</button>
            <Child></Child>
        </div>
    )
}
export default HooksRedux

状态管理——应有场景——多组件共享状态

function Child(){
    const [count, setCount] = useState(0)
    Store.subscribe(()=>{
        setCount(Store.getState().count)
   })
    return (
        <div>
        <div>
            <h1>HooksRedux子组件:{count}</h1>
            <button onClick={() => Store.dispatch({ type: "/user/increment",payload:{count: 5}  })}>+</button>
            <button onClick={() => Store.dispatch({ type: "/user/decrement",payload:{ count: 5 }})}>-</button>
        </div>
    </div>
    )
}
function HooksRedux() {
    const [count, setCount] = useState(0)
    Store.subscribe(()=>{
         setCount(Store.getState().count)
    })
    return (
        <div>
            <h1>HooksRedux父组件:{count}</h1>
            <button onClick={() => Store.dispatch({ type: "/user/increment",payload:{count: 5}  })}>+</button>
            <button onClick={() => Store.dispatch({ type: "/user/decrement",payload:{ count: 5 }})}>-</button>
            <Child></Child>
        </div>
    )
}
export default HooksRedux

效果就是多组件一起变化

状态管理——CombineReducers

常用于一个大的Store的拆分，将一个大Store拆分成一个小模块然后再挨个合并

（1）合并模块

import { createStore,combineReducers} from 'redux'
import UserController from "./UserController"
const defalut = {
  count: 0
}

const store = createStore(combineReducers({
    UserController
}))

（2）拆分出的模块

export default (state=defalut, action)=>{
    switch (action.type) {
        case "/user/increment":
            console.log(state)

            return {
                ...state,//合并以前的state
                count:state.count+action.payload.count//拓展新的state对象字段，如果旧字段存在就更新
            };
        case "/user/decrement":
            console.log(state)

            return {
                ...state,
                count:state.count-action.payload.count
            };
       default:
        console.log(state)

                return state
       }
}

（3）数据结构的改变

function HooksRedux() {
    const [count, setCount] = useState(0)
    /*
     每个模块的数据被独立分配在了自己的字段对象内了
     */
    Store.subscribe((item)=>{
         setCount(Store.getState().UserController.count)
    })
    return (
        <div>
            <h1>HooksRedux父组件:{count}</h1>
            <button onClick={() => Store.dispatch({ type: "/user/increment",payload:{count: 5}  })}>+</button>
            <button onClick={() => Store.dispatch({ type: "/user/decrement",payload:{ count: 5 }})}>-</button>
            <Child></Child>
        </div>
    )
}
export default HooksRedux

注意如果不相干的store尽量不要这样拆，因为同样的监听会触发不必要的监听回调，同一个store中所有监听都会被调用