React Redux Reducer CRUD - Javascript

在 React 中使用 Redux 的情况下，Reducer 是维护应用程序状态的一种方式。它提供了一种在 React 组件中管理全局变量的方法。在本文中，我们将学习基本的 Redux 是如何使用在 React 应用程序中，特别是 Reducer 如何使用和实现 CRUD 操作。

Redux 的安装和配置

让我们从安装和配置 Redux 开始，以下是在 React 应用程序中使用 Redux 的步骤：

1. 使用 npm 安装 Redux 和 React Redux

   npm install redux react-redux
   

2. 在您的 React 应用程序中引入 Redux 和 React Redux

   import { createStore } from 'redux';
   import { Provider } from 'react-redux';
   

3. 创建一个 Redux Store 并将其传递给 Provider 组件

   const store = createStore(yourReducerFunction);
   <Provider store={store}>
     <App />
   </Provider>
   

Reducer 的基本实现

Reducer 是一个函数，它接收旧状态和动作并返回新状态。在 React Redux 应用程序中，有一个单一的 rootReducer 函数，将所有单个 Reducer 函数组合在一起。

以下是示例 Reducer 函数：

const initialState = {
  todos: []
};

function todoReducer(state = initialState, action) {
  switch (action.type) {
    case 'ADD_TODO':
      return { todos: [ ...state.todos, action.payload ] };
    case 'DELETE_TODO':
      return { todos: state.todos.filter((todo) => todo.id !== action.payload) };
    case 'UPDATE_TODO':
      return { 
          todos: state.todos.map((todo) => 
              todo.id === action.payload.id ? 
              { ...todo, ...action.payload } : todo )
        };
    default:
      return state;
  }
}

我们定义了一个名为 initialState 的对象作为状态的默认值。每个 Action 的类型都有一个对应的代码块，然后按照特定的类型更新状态。在 ADD_TODO 情况中，我们通过展开运算符 (...) 从原数组中创建一个新数组，并添加新的 todo。

代码块中的其他情况采用类似的模式。

Reducer 的 CRUD 操作实现

在此示例中，我们将研究如何实现 CRUD 操作在 Reducer 函数中：

添加操作

case 'ADD_TODO':
      return { todos: [ ...state.todos, action.payload ] };

这是添加操作的示例，我们将新项目添加到 todos 数组中。

删除操作

case 'DELETE_TODO':
      return { todos: state.todos.filter((todo) => todo.id !== action.payload) };

这是删除操作的示例，我们使用 filter 方法从 todos 数组中删除指定的项。

更新操作

case 'UPDATE_TODO':
      return { 
          todos: state.todos.map((todo) => 
              todo.id === action.payload.id ? 
              { ...todo, ...action.payload } : todo )
        };

这是更新操作的示例，我们使用 map 方法找到指定的项并将其更新。

读取操作

在 Reducer 中，由于状态都位于一个对象中，我们不需要单独的“读取”操作。state 对象直接提供给组件进行访问。

总结

在本文中，我们学习了如何使用 React Redux 在 React 应用程序中实现一个基本的 Reducer 函数。我们还研究了一些示例操作，以演示 Reducer 如何实现 CRUD 操作。使用这个基础知识，您可以构建您自己的应用程序，定义您自己的 Reducer 函数，实现您自己的 CRUD 操作。