使用 react-redux 实现 CRUD答案

【问题标题】：Implementing CRUD with react-redux使用 react-redux 实现 CRUD
【发布时间】：2021-11-12 19:54:44
【问题描述】：

我搜索过这类问题，但他们未能解决这类情况。这是我面临的问题：
一种。有一个应用程序将托管 serverl crud 操作。让我们以 User Crud 操作为例。用户会喜欢

创建 api -（操作类型：REQUEST、SUCCESS、ERROR）。
更新 api -（操作类型：REQUEST、SUCCESS、ERROR）。
DELETE api -（操作类型：REQUEST、SUCCESS、ERROR）。
FETCH api -（操作类型：REQUEST、SUCCESS、ERROR）。

每个 api 都有上面提到的操作来处理加载、成功和失败。怎么卖一去创造reducer呢？我们应该为用户 Api 创建 1 个 reducer 来处理 User 的 crud 操作还是每个 api 1 个 reducer？请记住，会有多个 crud api。这是我当前的实现：

const initialState = {
    loading: false,
    data: null,
    error: null
};

const UserReducer= (state = initialState, action) => {
    switch (action.type) {
        case CREATE_USER_REQUEST:
        case UPDATE_USER_REQUEST:
        case DELETE_USER_REQUEST:
        case FETCH_USERS_REQUEST: {
            return {
                ...state,
                loading: true
            };
        }
        case CREATE_USER_SUCCESS:
            return {
                ...state,
                loading: false,
                error: null
            };

        case FETCH_USERS_SUCCESS:
        case UPDATE_USER_SUCCESS:
        case DELETE_USER_SUCCESS: {
            return {
                ...state,
                data: action.payload,
                loading: false,
                error: null
            };
        }
        case FETCH_USERS_FAILURE:
        case CREATE_USER_FAILURE:
        case UPDATE_USER_FAILURE:
        case DELETE_USER_FAILURE: {
            return {
                ...state,
                data: null,
                loading: false,
                error: action.error
            };
        }
        default:
            return state;
    }
};

const reducers = combineReducers({
    api1: api1Reducer,
    userState: UserReducer
});

上述实现的问题是，当我们创建一个新用户时，userState 将返回 loading = true 但其他组件不会知道哪个动作，loading 是真的。用于获取用户列表或创建新用户？如果 api 失败了也是如此。

B.成功创建新用户后，我们需要获取用户列表。我们将 redux-saga 用于 api。

function* createUser({ payload }) {
    try {
        const firm = yield requestCreateUser(payload);
        yield fetchUserList();
    } catch (error) {
        yield put(
            createBrokerFirmsFailure('Failed to get list of broker firms')
        );
    }
}


function* fetchUserList({ payload }) {
    try {
        const response = yield requestUserList(payload);
        yield put(fetchUserListSuccess(response));
    } catch (error) {
        yield put(
            fetchUserListFailure('Failed to get list of user')
        );
    }
}

正如您在上面的示例中看到的那样，在创建新用户之后，我从 Sage 本身调用 anfter 函数。这是处理这个问题的正确方法吗？

【问题讨论】：

对于问题A，您不能在要返回的状态中添加action.type吗？
你在这里重新发明轮子。试试 redux-toolkit 中的 createApi 函数。
@K450 这意味着我们仍然会在用户使用单个减速器期间丢失其他数据。例如：获取列表后userState会有用户列表，但是创建用户后会覆盖状态，我们会丢失用户列表。
@LindaPaiste 在使用 redux-toolikt 之后，似乎我必须为每个 api 创建一个 reducer，或者更新每个用户 api 的拥有状态的 userReducer 状态结构。像这样：{ data: userList: { error, loading, data }, userCreate: {error, loading, data}, userUpdate: {error, loading, data} }
@ShadabFaiz 如果您使用 redux-toolkit RTK 查询，那么您根本不需要自己的 reducer——它会为您创建所有 {error, loading, data} 内容。您将拥有来自createApi 的一个 API。您的每个 CRUD 操作都是 API 上的一个“端点”。您可以使用providesTags 和invalidatesTags 来处理它们之间的交互（例如，删除用户应该使用户列表无效）。

标签： reactjs redux react-redux redux-saga

【解决方案1】：

像这样处理 CRUD 操作 - 例如 - 由官方 Redux Toolkit 的“RTK Query”处理，它为您生成所有操作、reducers 等。它还基于每个请求而不是基于每个 reducer 来处理内容。

虽然你可以直接跳进去，但我建议你先看看官方的 Redux 教程（第 8 章和第 9 章还介绍了 RTK 查询），因为你在这里写的是一种非常过时的 Redux 风格，那将使您编写的 Redux 数量大约是现代方法所需的四倍。现代 Redux 不再使用 switch..case reducer、手写动作创建器、手写不可变逻辑或 ACTION_TYPE 常量。

https://redux.js.org/tutorials/essentials/part-1-overview-concepts

【讨论】：