使用 react-redux 实现 CRUD

Question

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

创建 api -（操作类型：请求、成功、错误）。
更新 api -（操作类型：请求、成功、错误）。
删除 api -（操作类型：请求、成功、错误）。
FETCH api -（操作类型：请求、成功、错误）。

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

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 将 return loading = true 但其他组件不知道哪个操作是 loading 为 true。用于获取用户列表或创建新用户？如果 api 失败，情况也是如此。

乙。成功创建新用户后，我们需要获取用户列表。我们使用 redux-saga apis.

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 本身内部调用后续函数。这是处理这个问题的正确方法吗？

Answer 1

像这样处理 CRUD 操作 - 例如 - 由官方 Redux 工具包的“RTK 查询”处理，它会为您生成所有操作、reducer 等。它还按请求处理内容，而不是按减速器处理。

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

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

使用 react-redux 实现 CRUD

Implementing CRUD with react-redux

reactjs

redux

react-redux

redux-saga