React + Redux Toolkit + React-Router-Dom v6：从零搭建项目

2023-12-18 11:04:19

前言

在前端开发中，React + Redux Toolkit + React-Router-Dom 是一个非常流行且强大的技术栈。它们可以帮助您快速构建出复杂且可扩展的单页面应用程序（SPA）。

本文将详细介绍如何使用这些技术从头开始搭建一个 React 项目。我们将从安装和配置必要的依赖项开始，然后逐步介绍如何创建组件、编写状态管理逻辑和路由规则。最后，我们将讨论如何部署项目到生产环境。

安装和配置

首先，我们需要安装必要的依赖项。可以使用以下命令：

npm install create-react-app --global

然后，创建一个新的 React 项目：

create-react-app my-project

这将创建一个名为 my-project 的新项目。

进入项目目录：

cd my-project

安装 Redux Toolkit 和 React-Router-Dom：

npm install redux-toolkit react-router-dom

创建组件

接下来，我们需要创建一些组件。组件是 React 中的基本构建块，它们可以用来表示应用程序的不同部分。

让我们首先创建一个名为 App 的组件。这个组件将作为应用程序的根组件，它将包含应用程序的所有其他组件。

在 src 目录下创建 App.js 文件，并添加以下代码：

import React from 'react';

function App() {
  return (
    <div className="App">
      <h1>Hello, world!</h1>
    </div>
  );
}

export default App;

这个组件很简单，它只包含一个 <h1> 标签，显示了 "Hello, world!" 这段文字。

接下来，我们需要创建一个名为 Home 的组件。这个组件将作为应用程序的主页。

在 src 目录下创建 Home.js 文件，并添加以下代码：

import React from 'react';

function Home() {
  return (
    <div>
      <h2>Home</h2>
      <p>This is the home page.</p>
    </div>
  );
}

export default Home;

这个组件也比较简单，它只包含一些文本内容。

编写状态管理逻辑

接下来，我们需要编写状态管理逻辑。Redux Toolkit 是一个非常流行且强大的状态管理库，它可以帮助您轻松地管理应用程序的状态。

让我们首先创建一个名为 store.js 的文件。这个文件将用于创建 Redux store。

在 src 目录下创建 store.js 文件，并添加以下代码：

import { configureStore } from '@reduxjs/toolkit';

const store = configureStore({
  reducer: {},
});

export default store;

这个文件创建了一个 Redux store，但目前还没有定义任何 reducer。

接下来，我们需要创建一个名为 counterSlice.js 的文件。这个文件将用于定义一个 Redux slice，用于管理计数器的状态。

在 src 目录下创建 counterSlice.js 文件，并添加以下代码：

import { createSlice } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter',
  initialState: {
    value: 0,
  },
  reducers: {
    increment: (state) => {
      state.value += 1;
    },
    decrement: (state) => {
      state.value -= 1;
    },
  },
});

export const { increment, decrement } = counterSlice.actions;
export default counterSlice.reducer;

这个文件定义了一个 Redux slice，它包含了计数器的初始状态和两个 reducer，分别用于增加和减少计数器。

接下来，我们需要将这个 slice 添加到 Redux store 中。在 store.js 文件中，将以下代码添加到 configureStore 函数的 reducer 参数中：

import counterSlice from './counterSlice';

const store = configureStore({
  reducer: {
    counter: counterSlice,
  },
});

编写路由规则

接下来，我们需要编写路由规则。React-Router-Dom 是一个非常流行且强大的路由库，它可以帮助您轻松地管理应用程序的路由。

让我们首先创建一个名为 App.js 的文件。这个文件将作为应用程序的根组件，它将包含应用程序的所有其他组件。

在 src 目录下创建 App.js 文件，并添加以下代码：

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

import Home from './Home';

function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
      </Switch>
    </Router>
  );
}

export default App;