redux 2024 (2)react中使用redux

安装

npm install react-redux 

npm install @reduxjs/toolkit react-redux

import {createSlice} from '@reduxjs/toolkit' //使用 createSlice 创建 Redux "切片" reducer
const counterStore = createSlice({name:"counter",// 初始化stateinitialState:{count:0},// 修改数据的方法 同步的方法reducers:{//。通过 createSlice，你可以定义一个状态的初始值（initialState）、一组修改状态的函数（reducers）increment(state){state.count++},decrement(state){state.count--}}
})// 解构出actions
const {increment,decrement} = counterStore.actions //虽然 createSlice 主要是用来定义 reducer 的，但是它也负责生成 actions，因此你会在 createSlice 的返回值中看到 actions 属性。// 获取reducer
const reducer = counterStore.reducer// 按需导出actionCreater
export {increment,decrement}// 默认导出reducer
export default reducer //只允许有一个默认导出

import { configureStore } from "@reduxjs/toolkit"; //configureStore 接受一个名为 reducer 的函数作为命名参数;configureStore 会自动使用良好的默认设置来设置 store
import counterReducer from './modules/counterStore'
configureStore({reducer:{counter:counterReducer}
})
export default store

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.jsx'
import './index.css'
import {Provider} from 'react-redux'
import store from './store/index.js'createRoot(document.getElementById('root')).render(<StrictMode><Provider store={store}><App /></Provider></StrictMode>,
)

展示数据

 

修改数据

import {useDispatch,useSelector } from "react-redux";
import {increment,decrement} from './store/modules/counterStore'
function App() {const {count} = useSelector(state =>state.counter)const dispatch = useDispatch()return (<><button onClick={()=>dispatch(decrement())}>-</button>
{count}
<button onClick={()=>dispatch(increment())}>+</button></>)
}export default App