@reduxjs/toolkit的使用

        之前使用react的都知道,全局状态管理redux的配置有多麻烦,配置store,reducer,actions,而且项目一旦大起来,很多个reducer,actions文件看着头痛,现在官方推出了一个新的编写redux的方法就是@reduxjs/toolkit,它极大地简化了配置,帮助我们从action/reducer地狱从解脱出来,步骤如下:

一、配置store

        这一步核心api是configureStore,它帮助我们方便地配置store,包括合并 reducer、添加 thunk 中间件以及设置 Redux DevTools 集成,示例如下:

import { configureStore } from "@reduxjs/toolkit";
import userReducer from "../reducer/user";
import orderReducer from "../reducer/order";


export default configureStore({
    reducer: {
        user: userReducer    //key: Reducer
        order: orderReducer
    }
});

        如果需要合并多个reducer时,只需要在reducer对象里定义一个键用于区分不同的reducer即可,注意在子组件获取数据时需要多调用一层,如:store.user.userName

二、配置reducer

        这一步用到的核心api是createSlice,与之前reducer写法不同,之前action以及reducer需要分开配置,而使用createSlice允许我们定义一个仓库initialState,以及其相关actions放置于reducers对象下,然后将其暴露出去,子组件可以直接在dispatch中调用,示例如下:

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

const UserState = createSlice({
    name: "user",
    initialState: {
        userName: ""
    },
    reducers: {
        setUserName: (state, action) => {
            /*
             *  action包含2个属性,
             *  type: "user/setUserName"  
             *  payload: 通过dispatch调用此函数时传的值 
            */
            state.userName = action.payload;
        }
    }
});

//将action暴露出去
export const { setUserName } = UserState.actions;

export default UserState.reducer;

  到这一步,我们的store就配置完成了,是不是跟以前相比简单多了,这就是toolkit的魅力!

三、引入Provider

import {Provider} from "react-redux";
import Main from "./main";
import store from "../store";

function App(){
    return (
        <Provider store={store}>
           <Main />
        </Provider>
    )
}

export default App;

四、子组件调用

import { useDispatch, useSelector } from "react-redux";
import { setUserName } from "reducer/user";


function Child(){
    const dispatch = useDispatch();
    const state = useSelector(state=>state);
    const { userName } = state.user;
    
    const clickMethod = () => {
        dispatch(setUserName("ggbond"));
    }

    return (
        <button onClick={clickMethod}>click me</button>
    )
}

        到此整个redux全局状态管理就配置完成了,不知道你们舒服了没有反正我是舒服了!

### 使用 Redux Toolkit 处理异步操作 为了在 React 项目中使用 `@reduxjs/toolkit` 来处理异步逻辑,通常会采用 Thunk middleware。这允许编写 action creators 返回函数而不是动作对象,从而可以执行异步任务并最终分发同步的动作来更新状态[^1]。 #### 安装必要的依赖项 首先,在项目中安装所需的库: ```bash npm install @reduxjs/toolkit react-redux ``` 或者如果偏好 Yarn: ```bash yarn add @reduxjs/toolkit react-redux ``` #### 创建带有中间件支持的 Store 当设置 Redux store 时,确保包含了 thunk 中间件的支持。通过 `configureStore()` 函数,默认情况下已经集成了该功能,因此不需要额外配置[^3]。 ```javascript import { configureStore } from '@reduxjs/toolkit'; import rootReducer from './reducers'; // 假设这是根 reducer 文件路径 const store = configureStore({ reducer: rootReducer, }); export default store; ``` #### 编写 Async Action Creators 对于每一个需要发起网络请求或其他耗时操作的地方,定义相应的 async thunks。这些 thunks 可以利用 JavaScript 的 Promise 和 async/await 特性简化代码结构。 下面是一个简单的例子展示如何创建一个用于获取用户列表的 async thunk: ```javascript // src/features/users/userSlice.js import { createAsyncThunk, createSlice } from '@reduxjs/toolkit'; export const fetchUsers = createAsyncThunk('users/fetchAll', async () => { const response = await fetch('/api/users'); return response.json(); }); const userSlice = createSlice({ name: 'users', initialState: { entities: [], status: 'idle', // 'idle' | 'loading' | 'succeeded' | 'failed' error: null, }, reducers: {}, extraReducers(builder) { builder.addCase(fetchUsers.pending, (state) => { state.status = 'loading'; }); builder.addCase(fetchUsers.fulfilled, (state, action) => { state.status = 'succeeded'; state.entities = action.payload; }); builder.addCase(fetchUsers.rejected, (state, action) => { state.status = 'failed'; state.error = action.error.message; }); }, }); export default userSlice.reducer; ``` 在这个片段里,`createAsyncThunk` 被用来构建一个名为 `'users/fetchAll'` 的异步 action creator。它接受两个参数:action 类型字符串和返回 promise 的回调函数。这个 callback 将被执行,并且其结果会被传递给对应的 fulfilled case handler;如果有错误发生,则 rejected case handler 会被触发。 #### 在组件内调用 Async Actions 并访问 State 最后一步是在实际的应用程序组件内部使用上述定义好的 actions 和 selectors。这里展示了怎样在一个典型的 React 组件中完成这项工作[^2]。 ```jsx import React, { useEffect } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { fetchUsers } from '../features/users/userSlice'; function UserList() { const users = useSelector((state) => state.users.entities); const status = useSelector((state) => state.users.status); const dispatch = useDispatch(); useEffect(() => { if (status === 'idle') { dispatch(fetchUsers()); } }, [dispatch, status]); return ( <ul> {users.map(user => ( <li key={user.id}>{user.name}</li> ))} </ul> ); } export default UserList; ``` 这段代码说明了如何监听用户的加载状态并在适当的时候触发异步的数据抓取过程。同时,也示范了如何从全局的状态树中选取特定部分作为本地 props 使用[^5]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值