首先进行安装toolkit
和 react-redux
npm install @reduxjs/toolkit react-redux
Redux Toolkit 示例
在src
目录下新建stroe
文件夹,store
文件夹下新建index.js
和modules
(模块)文件夹
src >> stroe >> index.js / mudules
1. 创建 Redux Store(redux仓库)
- 在我们新建的
store
文件夹下的index.js
里粘贴即可
import {
configureStore } from '@reduxjs/toolkit'
// 使用configureStore创建一个redux仓库
// 并自动配置了 Redux DevTools 扩展 ,这样你就可以在开发时调试 store
export default configureStore({
// 此时我们还没有写入 reducer 后面这里再写入,有一个就写一个,也可以写入多个,在reducer大括号里写入
reducer: {
},
})
2. 为 React 提供 Redux Store
- 新建完仓库之后,并没有与
React
产生关联,所以我们需要产生关联,这样React
才能进行使用Toolkit
在index.js
中进行关联
import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import App from './App'
// 引入数据仓库,只有文件夹,默认会引入文件夹下的index.js
import store from './store'
// 结构出提供者组件,它有一个stroe属性,属性值就是我们要传递的值
import {
Provider } from 'react-redux'
ReactDOM.render(
{
/* 包裹App组件,这样全局都能进行使用 */}
<Provider store={
store}>
<App />
</Provider>,
document.getElementById('root')
)
3. 创建 Redux State Slice(切片)
切片可以理解为模块
在
modules
文件夹下新建counterSlice.js
import {
createSlice } from '@reduxjs/toolkit'
// 创建react数据切片 利用createSlice()
export const counterSlice = createSlice({
// 类似于vuex的命名空间,必须是唯一值
// 与pinia的defineStore()的第一个参数一个意思,都是唯一值,做区分
name: 'counter',
// 定义变量
initialState: {
value: 0,
},
// 定义方法
reducers: {
// 方法接收2个参数,第一个参数是变量,第二个参数是载荷(也就是使用方法传入的参数)
// +1
increment: (state) => {
// Redux Toolkit 允许我们在 reducers 写 "可变" 逻辑。它
// 并不是真正的改变状态值,因为它使用了 Immer 库
// 可以检测到“草稿状态“ 的变化并且基于这些变化生产全新的
// 不可变的状态
// 大致意思就是可以直接修改原先的值,它会产生新的不可变状态,放心大胆修改
state.value += 1
},
// -1
decrement: (state) => {
state.value -= 1
},
// 这种是使用action的时候传参的
incrementByAmount: (state, action) => {
state.value += action.payload
},
},
})
// 每个 case reducer 函数会生成对应的 Action creators 需要进行导出,这样组件使用方法或者变量的时候,直接引入就可了
export const {
increment, decrement, incrementByAmount } = counterSlice.actions
export default counterSlice.reducer
4. 将 Slice Reducers 添加到 Store 中
下一步,我们需要从计数切片中引入 reducer 函数,并将它添加到我们的 store 中。通过在 reducer 参数中定义一个字段,我们告诉 store 使用这个 slice reducer 函数来处理对该状态的所有更新
import {
configureStore } from '@reduxjs/toolkit'
// 引入 reducer 函数
import counterSlice from './modules/counterSlice'
// 使用configureStore创建一个redux仓库
// 并自动配置了 Redux DevTools 扩展 ,这样你就可以在开发时调试 store
export default configureStore({
reducer: {
// 告诉 store 使用这个 slice reducer 函数来处理对该状态的所有更新
counter: counterSlice,
},
})
5. 在 React 组件中使用 Redux 状态和操作
现在我们可以使用 React-Redux 钩子让 React 组件与 Redux store 交互。我们可以使用 useSelector
从 store 中读取数据,使用 useDispatch
dispatch actions。
import React from 'react'
import {
useSelector, useDispatch } from 'react-redux'
import {
decrement, increment } from '../store/modules/counterSlice'
export default function Person() {
const count = useSelector((state) => state.counter.value)
const dispatch = useDispatch()
return (
<div>
<h2>Person -- {
count}</h2>
<button
// aria-label="Increment value"
onClick={
() => dispatch(increment())}
>
增加
</button>
<button
// aria-label="Decrement value"
onClick={
() => dispatch(decrement())}
>
减少
</button>
</div>
)
}
如何处理异步任务
counterSlice.js
import {
createSlice } from '@reduxjs/toolkit'
// 创建react数据切片 利用createSlice()
export const counterSlice = createSlice({
// 类似于vuex的命名空间,必须是唯一值
// 与pinia的defineStore()的第一个参数一个意思,都是唯一值,做区分
name: 'counter',
// 变量
initialState: {
value: 0,
},
// 方法
reducers: {
// 方法接收2个参数,第一个参数是变量,第二个参数是载荷(也就是使用方法传入的参数)
increment: (state) => {
// Redux Toolkit 允许我们在 reducers 写 "可变" 逻辑。它
// 并不是真正的改变状态值,因为它使用了 Immer 库
// 可以检测到“草稿状态“ 的变化并且基于这些变化生产全新的
// 不可变的状态
state.value += 1
},
decrement: (state) => {
state.value -= 1
},
incrementByAmount: (state, action) => {
state.value += action.payload
},
// 获取数据的异步请求方法
getD: (state, action) => {
fetch('https://cnodejs.org/api/v1/topics')
.then((response) => response.json())
.then((res) => console.log(res))
},
},
})
// 每个 case reducer 函数会生成对应的 Action creators
export const {
increment, decrement, incrementByAmount, getD } =
counterSlice.actions
// 定义异步任务,参数写道外层函数上,利用闭包
export const getData = (payload) => {
// 内层函数,第一个参数是提交任务的dispatch,第二个参数是获取state的方法
return (dispatch, getState) => {
// 获取state中的数据
console.log(getState().counter)
// 调用方法
dispatch(getD())
}
}
export default counterSlice.reducer
使用
import React from 'react'
import {
useSelector, useDispatch } from 'react-redux'
import {
decrement, increment, getData } from '../store/modules/counterSlice'
export default function Person() {
const count = useSelector((state) => state.counter.value)
const dispatch = useDispatch()
return (
<div>
<h2>Person -- {
count}</h2>
<button onClick={
() => dispatch(increment())}>增加</button>
<button onClick={
() => dispatch(decrement())}>减少</button>
<button onClick={
() => dispatch(getData())}>获取数据</button>
</div>
)
}
原文链接:https://blog.csdn.net/qq_52845451/article/details/129833160
此处评论已关闭