在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
相关推荐
良木林43 分钟前
JavaScript书写基础和基本数据类型
开发语言·前端·javascript
brzhang7 小时前
我操,终于有人把 AI 大佬们 PUA 程序员的套路给讲明白了!
前端·后端·架构
止观止8 小时前
React虚拟DOM的进化之路
前端·react.js·前端框架·reactjs·react
goms8 小时前
前端项目集成lint-staged
前端·vue·lint-staged
谢尔登8 小时前
【React Natve】NetworkError 和 TouchableOpacity 组件
前端·react.js·前端框架
Lin Hsüeh-ch'in8 小时前
如何彻底禁用 Chrome 自动更新
前端·chrome
augenstern41610 小时前
HTML面试题
前端·html
张可10 小时前
一个KMP/CMP项目的组织结构和集成方式
android·前端·kotlin
G等你下课10 小时前
React 路由懒加载入门:提升首屏性能的第一步
前端·react.js·前端框架
谢尔登11 小时前
【React Native】ScrollView 和 FlatList 组件
javascript·react native·react.js