![](https://img-blog.csdnimg.cn/592005928abe4203ad0ec570692cbf59.png)
index.ts:
import { legacy_createStore } from "redux";
import reducer from './reducer'
const store = legacy_createStore(reducer)
export default store
reducer.ts:
const defaultState = {
num: 10
}
let reducer = (state = defaultState, action:{ type: string, val: number }) => {
let newState = JSON.parse(JSON.stringify(state))
switch (action.type) {
case 'add1':
newState.num = newState.num + action.val;
break;
default:
break;
}
return newState
}
export default reducer
main.ts:
import React from 'react'
import ReactDOM from 'react-dom/client'
import Router from '@/router/index.tsx'
import store from './store'
import { Provider } from 'react-redux'
ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
<Provider store={store}>
<Router />
</Provider>
</React.StrictMode>,
)
页面组件调用:
import { useSelector, useDispatch } from 'react-redux'
export default function Home() {
let num = useSelector(state => state.num)
const dispatch = useDispatch()
const handleAdd1 = () => {
dispatch({ type: 'add1', val: 5 })
}
return (
<>
<p>num: { num }</p>
<button onClick={handleAdd1}>+1</button>
</>
)
}