5.8 react状态管理

react 模块化样式与状态管理

  • 状态管理 redux redux-toolkit

  • 模块化样式

1.状态管理库 redux redux-toolkit

安装

复制代码
  pnpm install @reduxjs/toolkit react-redux

乱传,整个项目 进行数据的共享

  • 创建状态的模块文件 store/userSlice.jsx
复制代码
  // 只是 用户模块的共享数据的Slice 
  ​
  import { createSlice } from '@reduxjs/toolkit'
  ​
  // 整个模块暴露给store仓库 进行配置使用
  export const userSlice = createSlice({
          name:'user',
          // 数据
          initialState:{
              num:1000,
              userInfo:{
                  id:1000,
                  name:'John',
                  email:'john@gmail.com',
                  tell:'16231565844',
                  nickName:'葬爱家族',
                  address:'中国北京'
              }
          },
          // 方法
          reducers:{
              changeUserInfo(state,{payload}){
                  state.userInfo = {...payload}
              },
              // 页面传递给修改方法的数据  放在了 {type:'xxx',payload:页面传递实参} 中的payload中
              changeUserInfoTell(state,{payload}){
                  state.userInfo.tell = payload
              }
          }
  })
  ​
  // 将所有的修改方法 暴露给页面 进行使用
  export const {changeUserInfo,changeUserInfoTell} = userSlice.actions
  ​

2.创建 整个仓库的配置文件 store/index.jsx

复制代码
  
  // 整个store仓库的配置文件 
  import {  configureStore } from '@reduxjs/toolkit'
  import {userSlice} from './userSclie'
  ​
  const store = configureStore({
      reducer:{
          // 模块化
          // user: userReducer
          userSlice:userSlice.reducer
      }
  })
  ​
  // 将store仓库整体配置暴露给main.jsx  全局注入使用(整个项目生效)
  export default store;

3.全局注入 store配置 main.jsx

复制代码
  
  ​
  import { createRoot } from 'react-dom/client'
  import './index.css'
  import App from './App.jsx'
  // 全局注入store  redux toolkit
  import {Provider} from 'react-redux'
  import  store from './store'
  createRoot(document.getElementById('root')).render(
   <Provider store={store}>
      <App /> 
   </Provider>
     
  )
  ​

4.页面使用 获取数据useSelector 修改数据 useDispatch

复制代码
  
  ​
  import { createRoot } from 'react-dom/client'
  import './index.css'
  import App from './App.jsx'
  // 全局注入store  redux toolkit
  import {Provider} from 'react-redux'
  import  store from './store'
  createRoot(document.getElementById('root')).render(
   <Provider store={store}>
      <App /> 
   </Provider>
     
  )
  ​

2.模块化CSS 有作用域的CSS

在react 中所有的 样式文件 写的样式 默认都是 全局样式

  • 修改less 文件后缀
复制代码
  
  index.modules.less 
复制代码
  .login{
      width: 100%;
      height: 100%;
      background-color: #2d3a4b;
      display: flex;
      justify-content: center;
      align-items: center;
  ​
  }
  .form-box{
      width: 400px;
  }
  • 页面使用
复制代码
  
  import style from './index.module.less'
复制代码
  
    <div className={style.login}>
          <div className={style['form-box']}>

​ : TS 5-10

相关推荐
灵感__idea5 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
hui函数8 小时前
掌握JavaScript函数封装与作用域
前端·javascript
Carlos_sam9 小时前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript
小毛驴8509 小时前
创建 Vue 项目的 4 种主流方式
前端·javascript·vue.js
今禾11 小时前
前端开发中的Mock技术:深入理解vite-plugin-mock
前端·react.js·vite
你这个年龄怎么睡得着的11 小时前
Babel AST 魔法:Vite 插件如何让你的 try...catch 不再“裸奔”?
前端·javascript·vite
我想说一句11 小时前
掘金移动端React开发实践:从布局到样式优化的完整指南
前端·react.js·前端框架
码间舞11 小时前
Zustand 与 useSyncExternalStore:现代 React 状态管理的极简之道
前端·react.js
Dream耀11 小时前
提升React移动端开发效率:Vant组件库
前端·javascript·前端框架
NUC_Dodamce12 小时前
Cocos3x 解决同时勾选 适配屏幕宽度和 适配屏幕高度导致Widget组件失效的问题
开发语言·javascript·ecmascript