在react中 使用redux

1.安装redux

npm install @reduxjs/toolkit react-redux

2.创建切片模块化数据

在Src目录下创建store目录,创建moude目录 创建tab.js

javascript 复制代码
import { createSlice } from '@reduxjs/toolkit';
const tabSlice = createSlice({
  name: 'tab',
  initialState: {
      Collapse: false,
  },
  reducers: {
    setCollapse:(state,action)=>{
      state.Collapse = !state.Collapse
    }
  }
})
export const {setCollapse} = tabSlice.actions
export default tabSlice.reducer

3.创建store

在store目录下创建index.js

javascript 复制代码
import { configureStore } from '@reduxjs/toolkit';
import TabData from './modules/tab.js'
export default configureStore({
    reducer: {
      Tab:TabData
    }
})

4.全局注册redux

src/inedx.js

javascript 复制代码
import {Provider} from 'react-redux'
import store from './store'

root.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>
);

5.在页面获取展示数据

javascript 复制代码
import { useSelector } from 'react-redux';

 const showMenu = useSelector((state) => state.Tab.Collapse);
//  state.Tab.Collapse
// Tab是reducer里定义的   Collapse 是initialState 里定义的

6.修改数据

javascript 复制代码
import {useDispatch} from 'react-redux'
//实例化useDispatch
const dispatch = useDispatch()


dispatch(setCollapse())
//setCollapse 是之前定义修改数据的方法

完整代码

javascript 复制代码
import React from 'react';
import { Layout,Button,Avatar,Dropdown } from 'antd';
import './index.css';
import { MenuFoldOutlined } from '@ant-design/icons';
import {useDispatch} from 'react-redux'
import {setCollapse} from '../../../../store/modules/tab'
const { Header } = Layout;
const url = 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg';
const ComHeader = ({showMenu2}) => {
  const dispatch = useDispatch()
  const isShow = () => {
    dispatch(setCollapse())
  }
  const items = [
    {
      key: '1',
      // eslint-disable-next-line jsx-a11y/anchor-is-valid
      label: (<a>个人中心</a>),
    },
    {
      key: '2',
      // eslint-disable-next-line jsx-a11y/anchor-is-valid
      label: (<a onClick={()=>logout}>退出</a>),
    },
  ];
  return (
    <Header className='header-container'>
      <Button type="text" icon={<MenuFoldOutlined></MenuFoldOutlined>} style={{color: 'white',fontSize:'18px'}} onClick={()=>{isShow()}}>
      </Button>
      <Dropdown menu={{ items }}>
        <Avatar src={<img src={url} alt="avatar" />} />
      </Dropdown>
      
    </Header>
  )
}
export default ComHeader
相关推荐
翻滚吧键盘11 分钟前
{{ }}和v-on:click
前端·vue.js
上单带刀不带妹17 分钟前
手写 Vue 中虚拟 DOM 到真实 DOM 的完整过程
开发语言·前端·javascript·vue.js·前端框架
杨进军38 分钟前
React 创建根节点 createRoot
前端·react.js·前端框架
ModyQyW1 小时前
用 AI 驱动 wot-design-uni 开发小程序
前端·uni-app
说码解字1 小时前
Kotlin lazy 委托的底层实现原理
前端
爱分享的程序员2 小时前
前端面试专栏-算法篇:18. 查找算法(二分查找、哈希查找)
前端·javascript·node.js
翻滚吧键盘2 小时前
vue 条件渲染(v-if v-else-if v-else v-show)
前端·javascript·vue.js
vim怎么退出2 小时前
万字长文带你了解微前端架构
前端·微服务·前端框架
你这个年龄怎么睡得着的2 小时前
为什么 JavaScript 中 'str' 不是对象,却能调用方法?
前端·javascript·面试
Java水解2 小时前
前端常用单位em/px/rem/vh/vm到底有什么区别?
前端