从 Redux 异步请求数据：React 进阶指南

前端

2024-01-02 21:14:55

如何在 Redux 中发送异步请求以获取数据并将其显示在界面中？

当你开发一个复杂的 React 应用时，你不可避免地需要从服务器获取数据并将其显示在界面中。这是 Redux 和 Redux Saga 发挥作用的地方。

Redux 是一个状态管理库，允许你在应用程序中以可预测的方式管理数据。 它通过单向数据流和纯函数来实现这一点，从而使调试和应用程序状态预测变得更加容易。

Redux Saga 是一个 Redux 中间件，允许你在 Redux 中处理异步操作。 它是一个功能强大的工具，可以用来处理复杂的异步逻辑，例如从服务器获取数据或进行网络请求。

在本文中，我们将逐步演示如何使用 Redux 和 Redux Saga 从服务器获取数据并将其显示在 TodoList 列表项中。

步骤一：安装必要的库

首先，我们需要安装 Redux 和 Redux Saga。你可以使用以下命令来安装它们：

npm install redux redux-saga

步骤二：创建一个 Redux Store

接下来，我们需要创建一个 Redux Store。你可以使用以下代码来创建一个 Redux Store：

import { createStore, applyMiddleware } from 'redux';
import { rootReducer } from './reducers';
import createSagaMiddleware from 'redux-saga';

const sagaMiddleware = createSagaMiddleware();

const store = createStore(
  rootReducer,
  applyMiddleware(sagaMiddleware)
);

export default store;

步骤三：创建 Redux Action 和 Reducer

接下来，我们需要创建 Redux Action 和 Reducer 来处理从服务器获取数据的逻辑。Action 是一个对象，它表示要执行的操作。Reducer 是一个函数，它根据 Action 来更新 Redux Store 中的数据。

以下是如何创建 Redux Action 和 Reducer 的示例代码：

export const GET_TODOS_REQUEST = 'GET_TODOS_REQUEST';
export const GET_TODOS_SUCCESS = 'GET_TODOS_SUCCESS';
export const GET_TODOS_FAILURE = 'GET_TODOS_FAILURE';

export const getTodosRequest = () => ({
  type: GET_TODOS_REQUEST,
});

export const getTodosSuccess = (todos) => ({
  type: GET_TODOS_SUCCESS,
  todos,
});

export const getTodosFailure = (error) => ({
  type: GET_TODOS_FAILURE,
  error,
});

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

export const todosReducer = (state = initialState, action) => {
  switch (action.type) {
    case GET_TODOS_REQUEST:
      return {
        ...state,
        loading: true,
        error: null,
      };
    case GET_TODOS_SUCCESS:
      return {
        ...state,
        loading: false,
        todos: action.todos,
      };
    case GET_TODOS_FAILURE:
      return {
        ...state,
        loading: false,
        error: action.error,
      };
    default:
      return state;
  }
};

步骤四：创建 Redux Saga

接下来，我们需要创建一个 Redux Saga 来处理从服务器获取数据的逻辑。Saga 是一个生成器函数，它可以用来执行异步操作。

以下是如何创建 Redux Saga 的示例代码：

import { takeLatest, put, call } from 'redux-saga/effects';

function* getTodosSaga() {
  try {
    const response = yield call(fetch, 'http://localhost:3000/todos');
    const todos = yield response.json();
    yield put(getTodosSuccess(todos));
  } catch (error) {
    yield put(getTodosFailure(error));
  }
}

export function* todosSaga() {
  yield takeLatest(GET_TODOS_REQUEST, getTodosSaga);
}

步骤五：运行 Redux Saga

接下来，我们需要运行 Redux Saga。你可以使用以下代码来运行 Redux Saga：

import { runSaga } from 'redux-saga';

runSaga(todosSaga);

步骤六：在组件中使用 Redux Store

最后，我们需要在组件中使用 Redux Store。你可以使用以下代码在组件中使用 Redux Store：

import { connect } from 'react-redux';
import { getTodosRequest } from './actions';
import TodoList from './TodoList';

const mapStateToProps = (state) => ({
  todos: state.todos.todos,
  loading: state.todos.loading,
  error: state.todos.error,
});

const mapDispatchToProps = (dispatch) => ({
  getTodos: () => dispatch(getTodosRequest()),
});

export default connect(mapStateToProps, mapDispatchToProps)(TodoList);

现在，你就可以在组件中使用 Redux Store 来获取数据并将其显示在界面中了。