使用 Redux 处理 React 应用程序中的异步操作和状态管理

Question

我目前正在开发一个 React 应用程序，其中集成了用于状态管理的 redux 和用于管理异步操作的 Redux Thunk 中间件。但是，在有效构建代码以在帮助下异步处理数据获取、正确更新状态以及在整个应用程序中保持 ui 一致性方面，我面临着一些严峻的挑战。

我的应用程序的架构涉及通过 redux 管理的多个状态片。我已经设置了 Redux Thunk 来分派从 API 获取数据并执行其他异步任务的操作。这就是我面临的困难：

异步数据获取：我正在努力解决如何构建 thunk 操作来处理从 api 获取异步数据的问题。我需要一种清晰的方法来分派这些更新相关的状态切片，并确保我的用户界面准确地反映获取的数据。

状态规范化：我已经了解了在 Redux 中规范化状态以避免重复并确保高效更新的重要性。我不确定在我的应用程序上下文中实现此操作的最佳实践，其中数据结构可能在很多方面有所不同。

我尝试使用 async/await 语法构建我的 thunk 操作，并查看了 Redux 文档和各种在线资源。所以，请帮我解决它。

Answer 1

我希望您一定尝试以下方法。

针对请求、成功和失败的异步数据获取（使用 API）。

// Example action types
export const FETCH_DATA_REQUEST = 'FETCH_DATA_REQUEST';
export const FETCH_DATA_SUCCESS = 'FETCH_DATA_SUCCESS';
export const FETCH_DATA_FAILURE = 'FETCH_DATA_FAILURE';

// Example action creators
export const fetchDataRequest = () => ({ type: FETCH_DATA_REQUEST });
export const fetchDataSuccess = (data) => ({ type: FETCH_DATA_SUCCESS, payload: data });
export const fetchDataFailure = (error) => ({ type: FETCH_DATA_FAILURE, payload: error });

// Thunk action creator
export const fetchData = () => {
  return async (dispatch) => {
    dispatch(fetchDataRequest());
    try {
      const response = await fetch('https://api.example.com/data');
      const data = await response.json();
      dispatch(fetchDataSuccess(data));
    } catch (error) {
      dispatch(fetchDataFailure(error.message));
    }
  };
};

减少更新处理以保持用户界面一致性

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

const dataReducer = (state = initialState, action) => {
  switch (action.type) {
    case FETCH_DATA_REQUEST:
      return { ...state, loading: true, error: null };
    case FETCH_DATA_SUCCESS:
      return { ...state, loading: false, data: action.payload };
    case FETCH_DATA_FAILURE:
      return { ...state, loading: false, error: action.payload };
    default:
      return state;
  }
};

尝试标准化最佳实践作为其数据结构：

const initialState = {
  entities: {
    users: {},
    posts: {},
  },
  ids: {
    users: [],
    posts: [],
  },
  loading: false,
  error: null,
};

// Example action creator for normalized data
export const fetchUsers = () => {
  return async (dispatch) => {
    dispatch(fetchDataRequest());
    try {
      const response = await fetch('https://api.example.com/users');
      const users = await response.json();

      // Normalize users data
      let normalizedUsers = {};
      let userIDs = [];
      users.forEach(user => {
        normalizedUsers[user.id] = user;
        userIDs.push(user.id);
      });

      dispatch(fetchUsersSuccess(normalizedUsers, userIDs));
    } catch (error) {
      dispatch(fetchDataFailure(error.message));
    }
  };
};

更新状态，正确使用选择器并使用 Redux Saga 等其他中间件来进一步改进。