记录react-redux使用笔记

下载安装

npm i react-redux --save

npm i @reduxjs/toolkit

npm i redux --save

创建redux/store.js

import { configureStore } from '@reduxjs/toolkit'
//引入Slice
import {collapsedReducer} from '../components/sandbox/TopHeaderSlice'


export default configureStore({
   reducer:{
       //
       collapsed:collapsedReducer
   }
 })

TopHeaderSlice.js

import { createSlice } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'collapsed',         //属性名
  initialState: {
    value: false,           //初始值
  },
  reducers: {
  //方法
    changeCollapsed: (state) => { 
      state.value =!state.value
    },
  },
})
//导出
export const { changeCollapsed} = counterSlice.actions
export const counterReducer = counterSlice.reducer

index.js

import { Provider } from 'react-redux'
import store from '../src/redux/store'
......
root.render(
<Provider store={store}>
   <App />
</Provider>
)

组件里使用

import { useSelector, useDispatch } from 'react-redux'
import { changeCollapsed } from './TopHeaderSlice'
export default function TopHeader(props) {
  const collapsed = useSelector((state) => state.collapsed.value)
  const dispatch = useDispatch()
  ......
    return (
    <div>
       {collapsed}
       <Button type="text" onClick={() =>dispatch(changeCollapsed())}/>
     </div>
    )
}