Redux-toolkit 异步操作实现

Redux-toolkit异步操作实现

reducer分片文件

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

// 创建异步 action fetchData
// 这个异步 action 会在后台从指定的 URL 获取数据，并将获取的数据作为 payload
export const fetchData = createAsyncThunk(
    'data/fetchData',  // 异步 action 的名字，用于标识和调度
    async (url, thunkAPI) => {  // 异步函数，接收 url 和 thunkAPI 作为参数
        const response = await fetch(url);  // 发起 GET 请求
        const data = await response.json();  // 将返回的数据解析为 JSON 格式
        return data;  // 返回数据，将作为 action.payload 传递到 reducer
    }
);

const dataSlice = createSlice({
    name: 'data',  // 设置 slice 的名字
    initialState: {
        data: [],  // 存储从 API 获取的数据，初始值为空数组
        loading: false,  // 请求状态标识，表示是否正在加载
        error: null  // 存储错误信息，如果请求失败则保存错误
    },
    reducers: {},  // 没有额外的同步 reducers，这部分留空
    extraReducers: (builder) => {  // 处理异步操作的结果
        builder
            .addCase(fetchData.pending, (state) => {
                state.loading = true;  // 请求开始时，设置 loading 为 true
                state.error = null;  // 请求开始时清除之前的错误信息
            })
            .addCase(fetchData.fulfilled, (state, action) => {
                state.loading = false;  // 请求结束时，设置 loading 为 false
                state.data = action.payload;  // 将返回的 payload 数据保存到 state.data 中
            })
            .addCase(fetchData.rejected, (state, action) => {
                state.loading = false;  // 请求结束时，设置 loading 为 false
                state.error = action.error.message;  // 保存错误信息，显示失败原因
            });
    }
});

export default dataSlice.reducer;  // 导出 reducer，用于配置 store

创建store的文件

import { configureStore } from "@reduxjs/toolkit";
import dataReducer from './dataSlice';  // 引入 dataSlice 中的 reducer

// 配置 Redux store
const store = configureStore({
    reducer: {
        data: dataReducer  // 将 dataSlice 的 reducer 添加到 Redux store 中，存储数据状态
    }
});

export default store;  // 导出配置好的 store 供其他地方使用

组件中使用

import React, { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { fetchData } from "./dataSlice";  // 导入异步 action

function App() {
    const dispatch = useDispatch();  // 使用 useDispatch Hook 来触发 action
    const { data, loading, error } = useSelector(state => state.data);  // 使用 useSelector 获取 Redux state 中的数据

    useEffect(() => {
        // 在组件加载时触发异步请求，获取数据
        dispatch(fetchData('https://jsonplaceholder.typicode.com/posts'));
    }, [dispatch]);  // 只有 dispatch 变化时才会重新执行，避免不必要的请求

    if (loading) {
        // 当请求正在进行时，显示加载状态
        return <div>Loading...</div>;
    }

    if (error) {
        // 如果请求失败，显示错误信息
        return <div>Error: {error}</div>;
    }

    return (
        <div>
            <h1>Fetched Data:</h1>
            <ul>
                {/* 渲染从 API 获取到的数据 */}
                {data.map(post => (
                    <li key={post.id}>{post.title}</li>  // 渲染每个文章的标题
                ))}
            </ul>
        </div>
    );
}

export default App;  // 导出 App 组件

jsonplaceholder.typicode.com

jsonplaceholder.typicode.com 是一个免费的在线 REST API 服务，提供了模拟的、可用于开发和测试的 JSON 数据。它不需要认证，完全可以直接用于前端开发中，模拟和测试与后端 API 的交互。

基本使用
这个 API 提供了一些常见的资源，例如 posts（文章）、users（用户）、comments（评论）等。你可以通过不同的 HTTP 请求（GET、POST、PUT、DELETE）来操作这些资源。

可用的资源
以下是 jsonplaceholder 提供的一些常用资源和它们的基本用法：

1. Posts (文章)
获取所有文章：
GET https://jsonplaceholder.typicode.com/posts

获取单个文章：
GET https://jsonplaceholder.typicode.com/posts/{id}
例如：
GET https://jsonplaceholder.typicode.com/posts/1

2. Users (用户)
获取所有用户：
GET https://jsonplaceholder.typicode.com/users

获取单个用户：
GET https://jsonplaceholder.typicode.com/users/{id}
例如：
GET https://jsonplaceholder.typicode.com/users/1

3. Comments (评论)
获取某个文章的评论：
GET https://jsonplaceholder.typicode.com/posts/{postId}/comments
例如：
GET https://jsonplaceholder.typicode.com/posts/1/comments
4. Todos (待办事项)
获取所有待办事项：
GET https://jsonplaceholder.typicode.com/todos

获取单个待办事项：
GET https://jsonplaceholder.typicode.com/todos/{id}

5. Albums (相册)
获取所有相册：
GET https://jsonplaceholder.typicode.com/albums

获取单个相册：
GET https://jsonplaceholder.typicode.com/albums/{id}

6. Photos (图片)
获取所有图片：
GET https://jsonplaceholder.typicode.com/photos

获取单个图片：
GET https://jsonplaceholder.typicode.com/photos/{id}

7. Todos (待办事项)
获取所有待办事项：
GET https://jsonplaceholder.typicode.com/todos

获取单个待办事项：
GET https://jsonplaceholder.typicode.com/todos/{id}

使用示例
使用 fetch API 从 jsonplaceholder 获取数据
在前端开发中，你通常使用 fetch 或 axios 来发起请求。以下是使用 fetch 从 jsonplaceholder 获取所有的 posts 示例：

js

复制代码

// 获取所有的文章 
fetch('https://jsonplaceholder.typicode.com/posts') 
.then(response => response.json()) // 解析为 JSON 
.then(data => { console.log(data); // 打印获取的文章数据 })
.catch(error => { console.error('Error fetching data:', error); });

js

复制代码

import axios from 'axios'; 
axios.get('https://jsonplaceholder.typicode.com/posts') 
.then(response => { console.log(response.data); // 打印获取的文章数据 }) 
.catch(error => { console.error('Error fetching data:', error); });

模拟 POST 请求
你可以模拟向 jsonplaceholder 提交数据（例如：创建文章、用户等）。这里是如何发送一个 POST 请求：

fetch('https://jsonplaceholder.typicode.com/posts', { 
	  method: 'POST',
	  headers: { 'Content-Type': 'application/json' },
	  body: JSON.stringify({ title: 'My New Post',
	  body: 'This is the content of the post.', userId: 1 }) }) 
 .then(response => response.json()) 
 .then(data => { console.log('New post created:', data); }) 
 .catch(error => { console.error('Error creating post:', error); });