一个全局共享的状态不应该仅仅是共享,传递的作用,它也应该能被修改,做到一处修改,处处变化。
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。