前言
完成路由的基础配置后,我们需要存储一些需要全局使用的状态(例如token、用户id等),所用到的状态管理库是redux
。
Redux状态管理
redux是通过state来存储状态,通过
action
事件来管理和更新状态。它以集中式Store
的方式对整个应用中使用的状态进行集中管理,确保状态只能以可预测的方式更新
安装
1.redux官方开发工具集
bash
npm install @reduxjs/toolkit
2.redux官方的react绑定库
npm install react-redux
创建切片
首先我们先在src下创建文件夹store
,我们所有的状态管理的处理都存储在这里。在其下创建一个reducers
文件夹,用来保存模块化处理的状态切片。我们要存储用户信息、token的状态,我们可以在reducers下创建一个userSlice.js
文件表明其为用户的状态切片。
src/store/reducers/userSlice.js
javascript
import { createSlice } from '@reduxjs/toolkit'
import { getToken} from '@/utils/auth'
/**
* 创建一个用户状态切片
*/
const userSlice = createSlice({
// 用来作为区分action的名称
name: 'user',
// 状态初始值
initialState: () => {
// 如果localStorage中有从其中取,否则为null
const token = getToken() || null
return {
token,
userinfo: { username: 'Alan' }
}
},
// 状态操作方法
reducers: {
setUserinfo(state, action) {
const { payload } = action
state.userinfo = payload
}
}
})
// 导出经过redux包装的action对象
export const { setUserinfo } = userSlice.actions
// 导出切片对象
export default userSlice
创建store对象
我们有了切片后得要封装在一个store对象中然后统一暴露出去,这样在其它地方就可以通过store.xxx来访问此切片中的状态。
src/store/index.js
javascript
import { configureStore } from '@reduxjs/toolkit'
import userSlice from './reducers/userSlice'
// 创建store对象
const store = configureStore({
reducer: {
user: userSlice.reducer
}
})
export default store
在React组件中使用Redux
react-redux
库主要作用就是连接Redux Store
和React组件。
为React提供Redux Store
创建 store 后,我们可以通过在 src/index.js
中的应用程序外层放置一个 React Redux <Provider>
来使其对我们的 React 组件可用。导入我们刚刚创建的 Redux store,在 <App>
的外层放置一个 <Provider>
,并将 store 作为 prop 传递:
src/index.js
javascript
import React from 'react'
import ReactDOM from 'react-dom/client'
import { BrowserRouter } from 'react-router-dom'
import App from './App'
import './index.scss'
// 导入redux相关库及文件
+ import store from './store'
+ import { Provider } from 'react-redux'
const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
+ <Provider store={store}>
<BrowserRouter>
<App />
</BrowserRouter>
+ </Provider>
)
在React组件中使用Redux State和Actions
react-redux为我们提供了两个钩子函数useSelector
和useDispatch
使得我们可以很方便地得到state和操作state。
src/pages/Home
javascript
import React from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { setUserinfo } from '@/store/reducers/userSlice'
const Home = () => {
+ // 通过react-redux的useSelector钩子得到username
+ const username = useSelector((state) => state.user.userinfo.username)
+ // 分发action的钩子
+ const dispatch = useDispatch()
return (
<div>
<h2>Home</h2>
+ <h2>Username:{username}</h2>
+ <button onClick={() => dispatch(setUserinfo({ username:
+ 'Tom' }))}>设置用户名为Tom</button>
</div>
)
}
export default Home
最终得到的Home页面如下图,点击"设置用户名为Tom"按钮上方Username即变为Tom。说明我们在React组件中使用Redux State和Actions成功。