web前端全系列 教程
1839个小节阅读:2244.3k
鸿蒙应用开发
C语言快速入门
JAVA全系列 教程
面向对象的程序设计语言
Python全系列 教程
Python3.x版本,未来主流的版本
人工智能 教程
顺势而为,AI创新未来
大厂算法 教程
算法,程序员自我提升必经之路
C++ 教程
一门通用计算机编程语言
微服务 教程
目前业界流行的框架组合
web前端全系列 教程
通向WEB技术世界的钥匙
大数据全系列 教程
站在云端操控万千数据
AIGC全能工具班
A A
White Night
创建slices/productSlice.js
xxxxxxxxxx
import { createSlice } from '@reduxjs/toolkit'
//定义初始state
const initialState = { list: [] }
//创建slice
const slice=createSlice({
//定义域名称
name: 'product',
//传入初始state
initialState,
//定义reducers
reducers: {
addProduct: (state, action) => {
state.list.push(action.payload)
}
}
})
//导出action creator
export const {addProduct} =slice.actions
//导出reducer
export default slice.reducer
添加到Store中
xxxxxxxxxx
//app/store.js
import {configureStore} from '@reduxjs/toolkit'
import userReducer from '../slices/userSlice'
import productReducer from '../slices/productSlice'
//创建store
export default configureStore({
//传入reducer
reducer:{
user:userReducer,
product:productReducer
}
})
为应用添加路由功能,安装react-router-dom
xxxxxxxxxx
npm install react-router-dom
配置路由
创建router.js
xxxxxxxxxx
import React, { Suspense } from 'react'
import { HashRouter, Routes, Route } from "react-router-dom";
import App from './App'
const User = React.lazy(() => import('./pages/User'))
const Product = React.lazy(() => import('./pages/Product'))
export default <HashRouter>
<Suspense fallback={<div>页面跳转中...</div>}>
<Routes>
<Route path='/' element={<App />}>
<Route index element={<User />} />
<Route path='product' element={<Product />} />
</Route>
</Routes>
</Suspense>
</HashRouter>
创建Product组件
创建pages/Product.js
xxxxxxxxxx
import React, { useRef } from 'react';
import { useSelector, useDispatch } from 'react-redux'
import { addProduct } from '../slices/productSlice'
export default function Product() {
const nameRef = useRef()
const productList = useSelector(state => state.product.list)
const dispatch = useDispatch()
const onAdd = () => {
dispatch(addProduct({ name: nameRef.current.value }))
}
return (
<div>
我是商品页面<br />
商品名:<input ref={nameRef} required /><br />
{productList.map((item, index) => <li key={index}>
商品名:{item.name}
</li>)}
<button onClick={onAdd}>新增商品</button>
</div>
);
}
xxxxxxxxxx
//App.js
import logo from './logo.svg';
import './App.css';
import {Outlet, Link, NavLink} from 'react-router-dom'
function App() {
return (
<div className="App">
<NavLink to='/' style={({isActive})=>isActive?{color:'red'}:undefined}>用户</NavLink>
<NavLink to='/product' style={({isActive})=>isActive?{color:'red'}:undefined}>商品</NavLink>
<Outlet/>
</div>
);
}
export default App;
xxxxxxxxxx
//index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import reportWebVitals from './reportWebVitals';
import {Provider} from 'react-redux'
import store from './app/store'
import router from './router'
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
{/* 传递store */}
<Provider store={store}>
{/* 引入路由 */}
{router}
</Provider>
</React.StrictMode>
);
提示:
Store是一个树结构,我们通过reducer的key来区分不同的功能特性(域)。
任意组件都可以读取Store中的数据。
实时效果反馈
1. store树中的key值由___确定:
A createSlice传递的对象的name属性
B configureStore传递的对象的reducer对象的键名
答案
1=>B