hooks（useContext+useReducer）实现全局的状态管理_react hooks 全局状态管理

一个全局共享的状态不应该仅仅是共享，传递的作用，它也应该能被修改，做到一处修改，处处变化。

App.tsx

import React,{useEffect,useReducer,useState} from 'react';
// import logo from './logo.svg';
import './App.css';
import {
  // BrowserRouter as Router,
  Route,
  Link,
  // Router
} from "react-router-dom";
import {initState,context,countReducer} from './reducer/index'
import Count from './components/Count'
import ShowCount from './components/ShowCount'
 
 
 
function App() {
	let store=useReducer(countReducer,initState)
	useEffect(()=>{
		console.log('store',store)
	})
	let linkArr=[
		{
			path:'/page1',
			label:'页面1'
		},
		{
			path:'/page2',
			label:'页面2'
		},
		{
			path:'/page3',
			label:'页面3'
		}
	]
	let [currentIndex,setCurrentIndex]=useState(0)
	function changeCurrentIndex(index){
		setCurrentIndex(index)
	}
  return (
    <context.Provider value={store}>
		<div className="App">
			<ul className="list">
				{
					linkArr.map((item,index)=>{
						return <li className="list-item" onClick={(e)=>changeCurrentIndex(index,e)} key={index}><Link to={item.path} className={`${index===currentIndex?'active':''}`}>{item.label}</Link></li>
					})
				}
			</ul>
			<Route path='/page1' component={Page1}></Route>
			<Route path='/page2' component={Page2}></Route>
			<Route path='/page3' component={Page3}></Route>
		</div>
    </context.Provider>
  );
}
 
function Page1(){
	return (
		<div>
			<Count></Count>
		</div>
	)
}
function Page2(){
	return (
		<div>
			<ShowCount></ShowCount>
		</div>
	)
}
function Page3(){
	return (
		<div>
			this is  page3
		</div>
	)
}
export default App;
 

app.js主要作用：在顶级的组件利用context.Provider，并向下面的组件共享唯一的store（包含state，和dispatch），下面的任一组件通过useContext得到state和dispatch，就能共享并且改变state值。如何得到我们需要的state和dispatch呢，就是通过useReducer得到的。

./reducer/index
 

import React from 'react'
let initState={
    count:0
}
function countReducer(state={},action){
    switch(action.type){
        case 'increment':
            return {count:state.count+1}
        case 'decrement':
            return {count:state.count-1 }
        default:
            return state
    }
}
let context =React.createContext()
export {
    countReducer,
    initState,
    context
}

这包含了reducer和iniState，还导出了context，每个用到共享状态的都需要用到此context，以保证所有的组件到用的是同一个context。

Count.js

import React,{useContext} from 'react'
import {context} from '../reducer/index'
function  Count(){
    let [state,dispatch]=useContext(context)
    return (
        <div>
           <h1>count:{state.count}</h1>
           <div>
            <button style={{width:'128px',height:'30px'}} onClick={()=>dispatch({type:'decrement'})}>-</button>
            <button style={{width:'128px',height:'30px'}} onClick={()=>dispatch({type:'increment'})}>+</button>
           </div>
        </div>
    )
}
export default Count

count.js主要作用：通过useContext得到state和dispatch就可以展示和修改state了。

ShowCount.js

import React,{useContext} from 'react'
import {context} from '../reducer/index'
 
function ShowCount(){
    let [state]=useContext(context)
    return (
        <div>
           <h1>count:{state.count}</h1>
        </div>
    )
}
export default ShowCount

showCount.js作用和count.js差不多。只是这里只使用了state。