redux
1. 创建store
import { createSlice } from "@reduxjs/toolkit"
const counterStore = createSlice({
name: "counter",
initialState: {
count: 0,
},
reducers: {
increment(state) {
state.count++
},
decrement(state) {
state.count--
},
},
})
const { increment, decrement } = counterStore.actions
const reducer = counterStore.reducer
export { increment, decrement }
export default reducer
2. 配置store
import { configureStore } from "@reduxjs/toolkit"
import counterReducer from "./modules/counterStore"
const store = configureStore({
reducer: {
counter: counterReducer,
},
})
export default store
3. 注入store
import React from "react"
import ReactDOM from "react-dom/client"
import App from "./App"
import store from "./store"
import { Provider } from "react-redux"
const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(
<Provider store={store}>
<App />
</Provider>
)
4. 使用store
import { useSelector, useDispatch } from "react-redux"
import { decrement, increment } from "./store/modules/counterStore"
function App() {
const { count } = useSelector((state) => state.counter)
const dispatch = useDispatch()
return (
<div className="App">
{}
<button onClick={() => dispatch(decrement())}>-</button>
<span>{count}</span>
<button onClick={() => dispatch(increment())}>+</button>
</div>
)
}
export default App
异步请求处理
import { createSlice } from "@reduxjs/toolkit"
const channelStore = createSlice({
name: "channel",
initialState: {
channelList: [],
},
reducers: {
setChannel(state, action) {
state.channelList = action.payload
},
},
})
const { setChannel } = channelStore.actions
const fetchChannelList = () => {
return async (dispatch) => {
const res = await axios.get("http://geek.itheima.net/v1_0/channels")
dispatch(setChannel(res.data.data.channels))
}
}
export { fetchChannelList }
const reducer = channelStore.reducer
export default reducer
import { configureStore } from "@reduxjs/toolkit"
import counterReducer from "./modules/counterStore"
import channelReducer from "./modules/channelStore"
const store = configureStore({
reducer: {
counter: counterReducer,
channel: channelReducer,
},
})
export default store
import { useEffect } from "react"
import { useSelector, useDispatch } from "react-redux"
import { decrement, increment, addToNum } from "./store/modules/counterStore"
import { fetchChannelList } from "./store/modules/channelStore"
function App() {
const { count } = useSelector((state) => state.counter)
const { channelList } = useSelector((state) => state.channel)
const dispatch = useDispatch()
useEffect(() => {
dispatch(fetchChannelList())
}, [dispatch])
return (
<div className="App">
{}
<button onClick={() => dispatch(decrement())}>-</button>
<span>{count}</span>
<button onClick={() => dispatch(increment())}>+</button>
{}
<button onClick={() => dispatch(addToNum(10))}>add to 10</button>
<button onClick={() => dispatch(addToNum(20))}>add to 20</button>
{}
<li>
{channelList.map((item) => (
<li key={item.id}>{item.name}</li>
))}
</li>
</div>
)
}
export default App
router
路由配置
import Login from "../page/Login"
import Article from "../page/Article"
import { createBrowserRouter } from "react-router-dom"
const router = createBrowserRouter([
{
path: "/login",
element: <Login />,
},
{
path: "/article",
element: <Article />,
},
])
export default router
路由跳转
import { Link, useNavigate } from "react-router-dom"
const Login = () => {
const navigate = useNavigate()
return (
<div>
我是登录页
{}
<Link to="/article">跳转到文章页</Link>
{}
<button onClick={() => navigate("/article")}>跳转到文章页</button>
</div>
)
}
export default Login
路由传参
searchParams
{}
<button onClick={() => navigate("/article?id=1001&name=xxx")}>
跳转到文章页
</button>
import { useSearchParams} from "react-router-dom"
const [params] = useSearchParams()
const id = params.get('id')
const name = params.get('name')
Params
{}
<button onClick={() => navigate("/article/1001/xxx")}>
跳转到文章页
</button>
{
path: "/article/:id/:name",
element: <Article />,
}
import { useParams } from "react-router-dom"
const params = useParams()
const id = params.id
const name = params.name
嵌套路由
import Layout from "../page/Layout"
import Board from "../page/Board"
import About from "../page/About"
import { createBrowserRouter } from "react-router-dom"
const router = createBrowserRouter([
{
path: "/",
element: <Layout />,
children: [
{
path: "board",
element: <Board />,
},
{
index: true
element: <About />,
},
],
},
])
export default router
import { Link, Outlet } from "react-router-dom"
const Layout = () => {
return (
<div>
<div>this is Layout</div>
{}
<Link to="/board">Board</Link>
{}
<Link to="/">About</Link>
{}
<Outlet />
</div>
)
}
export default Layout
404
import NotFound from "../page/NotFound"
在总路由的配置的最下面增加path*配置
{
path: "*",
element: <NotFound />,
}
两种路由模式
createBrowerRouter:
需要后端支持
路径为url/login
createHashRouter:
不需要后端支持
路径为url/#/login