【问题标题】:Is it necessary to define our own action creators in Redux Toolkit?有必要在 Redux Toolkit 中定义我们自己的 action creators 吗?
【发布时间】:2021-08-13 17:44:26
【问题描述】:

所以,我试图找出在我的 react 项目中使用 redux 工具包的最佳方式。这是我目前在 redux 工具包中编写一个典型的 slice 以及 redux-thunk 来进行 API 调用的方式。

import { createSlice } from "@reduxjs/toolkit";
import axios from "axios";
import { baseUrl } from "../../../baseUrl";
const searchTrip = createSlice({
    name: "searchTrip",
    initialState: {
        isLoading: false,
        data: null,
        success: false,
    },
    reducers: {
        sendRequest: (state, action) => ({
            ...state,
            isLoading: true,
        }),
        sendSuccess: (state, action) => ({
            ...state,
            isLoading: false,
            errMess: null,
            data: action.data,
            success: true,
        }),
        sendFailed: (state, action) => ({
            ...state,
            isLoading: false,
            errMess: action.message,
            success: false,
        }),
    },
});
export const { sendFailed, sendRequest, sendSuccess } = searchTrip.actions;

//动作创建者:

export const requestSend = () => {
    return {
        type: sendRequest.type,
    };
};

export const receiveSend = (response) => {
    return {
        type: sendSuccess.type,
        data: response,
    };
};

export const sendError = (message) => {
    return {
        type: sendFailed.type,
        message,
    };
};

//redux thunk 进行 API 调用

 export const postSearchTrip = (data) => (dispatch) => {
        dispatch(requestSend());
        const call = {
            url: baseUrl + "trips/search",
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                Authorization: "Bearer " + localStorage.getItem("token"),
            },
            data: {
                search: data,
            },
        };
        return axios(call)
            .then((response) => {
                dispatch(receiveSend(response.data));
            })
            .catch((error) => {
                dispatch(sendError(error.message));
                alert(error);
            });
    };
    export default searchTrip.reducer;

现在,我觉得每个切片都重复了动作创建器部分,有没有办法不使用它。可以直接使用sendSuccess、sendRequest等吗??

另外,两个 slice 的 reducer 可以同名吗?与一般 API 调用一样,我将减速器命名为 sendRequest、sendSuccess 和 sendFaliure,并将这部分复制粘贴到所有切片中。这会产生什么问题吗?

【问题讨论】:

    标签: javascript reactjs redux frontend redux-toolkit


    【解决方案1】:

    不,createSlice 的意义在于它会自动为您生成动作创建者 - 您不(并且不应该)自己编写动作创建者!

    当您编写自己的 requestSend() 函数时,您只是在复制 createSlice 已经为您所做的事情。你可以完全停止这样做:)

    另外,请注意:

    • Redux Toolkit 已经有 a createAsyncThunk API,它简化了发出异步请求和调度操作的过程
    • 我们即将发布一个新的 "RTK Query" API,它将完全抽象数据获取过程 - 根本不需要编写 任何 thunk 或 reducer 来获取数据

    【讨论】:

    • 谢谢,在此之前我写了很多无意义的代码:(
    猜你喜欢
    • 1970-01-01
    • 2022-08-04
    • 2018-03-05
    • 2017-11-28
    • 2016-12-04
    • 1970-01-01
    • 2021-08-11
    • 2016-10-03
    • 2016-08-06
    相关资源
    最近更新 更多