将 React 路由器添加到 React Redux CRUD 应用程序

React 路由器和 Redux 可以极大地提高 WEB 应用程序的用户体验和性能。通过使用 React 路由器，可以轻松地创建多个页面并管理路由。你可以在 React 应用程序中将标准路由转换为 React 路由器，这可以使路由处理更加灵活且易于理解。

在本指南中，我们将了解如何将 React 路由器添加到一个 React Redux CRUD 应用程序中。

准备工作

在开始之前，请确保已经安装了以下软件：

• Node.js（8.10.0 或更高版本）
• React
• React Redux
• React Router

创建一个 React 应用程序

首先，让我们创建一个简单的 React 应用程序。我们将使用 create-react-app 工具来创建这个应用程序。

打开终端并运行以下命令：

npx create-react-app react-redux-crud-app

这将在当前目录中创建一个名为 react-redux-crud-app 的新应用程序文件夹。

进入文件夹并启动开发服务器：

cd react-redux-crud-app
npm start

这将在你的浏览器中打开一个新的窗口，显示 React 应用程序。

现在我们已经成功创建了一个基本的 React 应用程序，让我们开始添加一些功能。

接入 Redux

首先，我们需要为我们的应用程序添加 Redux。要添加 Redux，请安装 redux 和 react-redux 库：

npm install redux react-redux

现在，让我们创建一个新的 Redux store。我们将在 src 目录下创建一个名为 store 的新文件夹，并在其中创建一个新文件 index.js。在这个文件中，我们将创建一个 Redux store 并将其导出。

import { createStore } from 'redux';

const initialState = {}; // 状态的初始值

function reducer(state = initialState, action) {
  switch (action.type) {
    default:
      return state;
  }
}

const store = createStore(reducer);

export default store;

在这个代码中，我们定义了一个空对象作为初始状态。我们还创建了一个 reducer 函数，它接收当前状态和操作作为输入。在这个示例中，我们只返回当前状态，但你可以在这里编写更复杂的逻辑。

最后，我们使用 createStore 函数创建了一个 Redux store。

让我们将这个存储库注入到我们的应用程序中。我们将在 src 目录下的 index.js 文件中导入应用程序和存储库，并使用 Provider 组件将存储库注入到我们的应用程序中。

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';

import store from './store'; // 导入 Redux store
import App from './App';

ReactDOM.render(
  <Provider store={store}> // 将存储库传递给 React
    <App />
  </Provider>,
  document.getElementById('root')
);

现在，我们已经将 Redux 添加到我们的应用程序中了。

创建 CRUD 组件

现在，让我们创建一个简单的 CRUD 组件。我们将在 src 目录下创建一个名为 components 的新文件夹，并在其中创建以下组件：

• Create.js - 创建一个新项目
• Read.js - 显示现有项目的列表
• Update.js - 更新现有项目
• Delete.js - 删除现有项目

我们将使用 React state 来跟踪当前状态。

Create.js 组件

import React, { useState } from 'react';

function Create() {
  const [title, setTitle] = useState('');

  function handleSubmit(event) {
    event.preventDefault();
    console.log(`Creating new item with title ${title}`);
    setTitle('');
  }

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Title:
        <input
          type="text"
          value={title}
          onChange={event => setTitle(event.target.value)}
        />
      </label>
      <button type="submit">Create</button>
    </form>
  );
}

export default Create;

这个组件有一个表单，用于创建一个新的项目。我们使用 useState Hook 来跟踪表单的标题。

当表单提交时，我们将标题打印到控制台并清除表单。

Read.js 组件

import React from 'react';

function Read() {
  const items = ['Item 1', 'Item 2', 'Item 3'];

  return (
    <ul>
      {items.map(item => (
        <li key={item}>{item}</li>
      ))}
    </ul>
  );
}

export default Read;

这个组件只是简单地显示一个固定列表，但这里有一个占位符，供我们稍后添加更多实际逻辑。

Update.js 组件

import React, { useState } from 'react';

function Update() {
  const [title, setTitle] = useState('');

  function handleSubmit(event) {
    event.preventDefault();
    console.log(`Updating item with title ${title}`);
    setTitle('');
  }

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Title:
        <input
          type="text"
          value={title}
          onChange={event => setTitle(event.target.value)}
        />
      </label>
      <button type="submit">Update</button>
    </form>
  );
}

export default Update;

这个组件类似于 Create.js，但它用于更新一个现有项目。

Delete.js 组件

import React from 'react';

function Delete() {
  function handleClick() {
    console.log('Deleting item');
  }

  return (
    <button onClick={handleClick}>
      Delete
    </button>
  );
}

export default Delete;

这个组件只是简单地显示一个“删除”按钮，并将其点击处理程序打印到控制台。我们稍后会将它与实际数据一起使用。

创建路由

现在，我们将为我们的应用程序添加路由。我们将在 src 目录下创建一个名为 routes.js 的新文件，并在其中定义我们的路由。

import React from 'react';
import { Switch, Route } from 'react-router-dom';

import Create from './components/Create';
import Read from './components/Read';
import Update from './components/Update';
import Delete from './components/Delete';

function Routes() {
  return (
    <Switch>
      <Route exact path="/" component={Read}></Route>
      <Route path="/create" component={Create}></Route>
      <Route path="/update" component={Update}></Route>
      <Route path="/delete" component={Delete}></Route>
    </Switch>
  );
}

export default Routes;

在这个代码中，我们使用 Switch 和 Route 组件来定义我们的路由。我们有四个路由，对应于我们的 CRUD 操作。

注意如何在 Route 组件中使用 component 属性来指定每个组件的路径。

现在，让我们回到 index.js 文件，并将该路由注入到我们的应用程序中。我们需要导入 BrowserRouter 组件并在包含我们的应用程序的 Provider 组件内使用它。

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { BrowserRouter } from 'react-router-dom';

import store from './store';
import App from './App';
import Routes from './routes';

ReactDOM.render(
  <Provider store={store}>
    <BrowserRouter>
      <App>
        <Routes />
      </App>
    </BrowserRouter>
  </Provider>,
  document.getElementById('root')
);

现在，我们已经将路由添加到我们的应用程序中了。我们可以导航到 /create、/update 和 /delete 页面并查看每个组件。

结论

在本指南中，我们了解了如何将 React 路由器和 Redux 添加到一个简单的 CRUD 应用程序中。通过使用 React 路由器，我们可以轻松地管理并维护应用程序中的多个页面。在我们的示例应用程序中，我们创建了四个不同的组件，用于执行 CRUD 操作。我们也学习了如何使用 React Router 来定义这些组件的路由。

完整的源代码可以在我的 GitHub 上找到。