React-redux/router

redux

1. 创建store

// ./store/modules/counterStore.js
import { createSlice } from "@reduxjs/toolkit"

const counterStore = createSlice({
  name: "counter",

  // 初始化state
  initialState: {
    count: 0,
  },

  // 修改状态的方法 同步操作
  reducers: {
    increment(state) {
      state.count++
    },
    decrement(state) {
      state.count--
    },
  },
})

// 解析出来actionCreate函数
const { increment, decrement } = counterStore.actions

// 获得reducer
const reducer = counterStore.reducer

// 按需导出actionCreate函数
export { increment, decrement }

// 以默认导出方式导出reducer
export default reducer

2. 配置store

// ./store/index.js
import { configureStore } from "@reduxjs/toolkit"

// 导入子模块下的reducer
import counterReducer from "./modules/counterStore"

// 配置store的reducer
const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
})

// 以默认导出方式导出store
export default store

3. 注入store

// ./index.js
import React from "react"
import ReactDOM from "react-dom/client"
import App from "./App"

// 导入store和Provider组件
import store from "./store"
import { Provider } from "react-redux"

const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(
  // 通过Provider组件包住，将store注入到App中
  <Provider store={store}>
    <App />
  </Provider>
)

4. 使用store

// ./App.js
import { useSelector, useDispatch } from "react-redux"

// 导入action对象方法
import { decrement, increment } from "./store/modules/counterStore"

function App() {
  const { count } = useSelector((state) => state.counter)

  // 获得dispatch函数
  const dispatch = useDispatch()
  return (
    <div className="App">
      {/* 调用dispatch函数提交action对象 */}
      <button onClick={() => dispatch(decrement())}>-</button>
      <span>{count}</span>
      <button onClick={() => dispatch(increment())}>+</button>
    </div>
  )
}
export default App

异步请求处理

// 1. 创建store在同步操作的基础上增加异步操作如下
// ./store/modules/channelStore.js
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

// 2. 配置store， 导入添加
// ./store/index.js
import { configureStore } from "@reduxjs/toolkit"

// 导入子模块下的reducer
import counterReducer from "./modules/counterStore"
import channelReducer from "./modules/channelStore"

// 配置store的reducer
const store = configureStore({
  reducer: {
    counter: counterReducer,
    channel: channelReducer,
  },
})

// 以默认导出方式导出store
export default store

// 3. 使用store， 使用useEffect调用dispatch传染action对象
// ./App.js
import { useEffect } from "react"
import { useSelector, useDispatch } from "react-redux"

// 导入action对象方法
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)

  // 获得dispatch函数
  const dispatch = useDispatch()

  // 处理异步请求
  useEffect(() => {
    dispatch(fetchChannelList())
  }, [dispatch])

  return (
    <div className="App">
      {/* 调用dispatch函数提交action对象 */}
      <button onClick={() => dispatch(decrement())}>-</button>
      <span>{count}</span>
      <button onClick={() => dispatch(increment())}>+</button>

      {/* 调用dispatch函数提交action对象和参数 */}
      <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

路由配置

// 路由 src\router\index.js
// 到入组件和createBrowserRouter 
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

路由跳转

// src\page\Login\index.js
// 导入两个跳转方式
import { Link, useNavigate } from "react-router-dom"
const Login = () => {
  // 第二种方法调用useNavigate钩子函数获得跳转方法
  const navigate = useNavigate()
  return (
    <div>
      我是登录页
      {/* 第一种方法声明式写法 */}
      <Link to="/article">跳转到文章页</Link>
      
      {/* 第二种方法命令式写法 */}
      <button onClick={() => navigate("/article")}>跳转到文章页</button>
    </div>
  )
}
export default Login

路由传参

searchParams

{/* 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

{/* 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

嵌套路由

// 1. 配置路由
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

// 2. 配置路由出口
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