时间戳

首页 > 解决方案 > 使用 react-redux 实现 CRUD

reactjs - 使用 react-redux 实现 CRUD

问题描述

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

  1. 创建 api -（操作类型：REQUEST、SUCCESS、ERROR）。
  2. 更新 api -（操作类型：REQUEST、SUCCESS、ERROR）。
  3. 删除 api -（操作类型：请求、成功、错误）。
  4. 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 函数。这是处理这个问题的正确方法吗？

标签： reactjsreduxreact-reduxredux-saga

解决方案

像这样处理 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

推荐阅读