React + Redux + React-Router 实战之完整的实例代码

阅读时长 11 分钟读完

React 是一个广泛使用的前端开发框架,它的虚拟 DOM 和单向数据流模型为开发者提供了高效的开发体验。Redux 是一个可预测的状态容器,它帮助我们管理着应用程序的状态。React-Router 则是处理页面路由的库,它可以帮助我们组织我们的 React 应用程序,并让我们实现更好的用户导航体验。

本篇文章主要介绍一种使用 React、Redux 和 React-Router 搭建前端网站的技术方案,并提供完整的实例代码,以供读者学习和参考。

前置知识

在学习本文的内容之前,你需要掌握以下技术:

  • 基础的 HTML、CSS 和 JavaScript 知识
  • 熟悉 React 的组件化开发模式
  • 了解 Redux 的基本使用方法
  • 掌握 React-Router 动态路由的使用

技术方案

本文使用的技术方案是采用 React 作为开发框架,Redux 作为状态容器,React-Router 用于处理前端路由,同时在开发过程中使用 Webpack 进行打包和部署。

目录结构

我们在开始编写代码之前需要构建项目目录结构。一个标准的 React + Redux + React-Router 目录结构如下:

-- -------------------- ---- -------
----
--- ----------
-   --- ------
-   --- ---
--- -----
-   --- -----
-   -   --- --------
-   -   --- ----------
-   -   --- ---
-   --- ---
--- -----
-   --- -------
-   -   --- ---
-   --- --------
-   -   --- ---
-   --- --------
--- ------
-   --- -----------
-   --- ---
--- --------
  • components/ 文件夹中存放的是 React 组件。
  • pages/ 文件夹中存放的是所有的页面,每一个页面都是一个 React 组件。
  • store/ 文件夹中存放着 Redux 中的 actionsreducers,以及 Redux 的 store
  • styles/ 文件夹中存放的是所有的 CSS 和 SCSS 样式文件。
  • index.js 是应用程序的入口文件。

整合 React 和 React-Router

index.js 文件中,我们需要整合 React 和 React-Router:

-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - ------------- -- ------- ----- - ---- -------------------

------ --- ---- -------------------
------ ----- ---- ----------------------

----------------
  --------
    ------ -------- --------------- --
    ------ ------------- ----------------- --
  ----------
  -------------------------------
--

在上面的代码中,我们首先引入了 React、ReactDOM 和 React-Router 的相关模块,然后定义了两个路由:"/""/about"。这两个路由分别映射到 AppAbout 组件,并在 ReactDOM.render() 中渲染整个应用程序。

整合 Redux

现在,我们接着添加 Redux 功能。首先,我们需要在项目中引入 Redux 和 React-Redux 相关模块:

然后,我们创建一个 Redux store,使用 Provider 将 store 传递给我们的应用程序:

-- -------------------- ---- -------
----- ----- - -------------------------

----------------
  --------- --------------
    --------
      ------ -------- --------------- --
      ------ ------------- ----------------- --
    ---------
  ------------
  -------------------------------
--

现在,我们可以在我们的组件中使用 Redux 中的数据了。例如,在 About 组件中,我们可以通过 react-redux 提供的 connect() 方法连接 Redux store:

样式

在本例中,我们使用 SCSS 来管理样式,使用 style-loadercss-loader 从 JavaScript 中加载 CSS。我们需要在 webpack.config.js 文件中如下配置:

-- -------------------- ---- -------
-------------- - -
  -- ---
  ------- -
    ------ -
      -
        ----- ----------
        ---- -
          --------------- -- ------- ----- ----- ---- -- -------
          ------------- -- ---------- --- ---- --------
          ------------- -- -------- ---- -- ---- ----- ---- ---- -- -------
        -
      -
    -
  -
--

示例代码

下面是一个完整的实例代码,实现了一个简单的计数器应用程序,可以使用 redux 控制器来加减数值。具体使用流程如下:

效果如下图:

index.js

-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - ------------- -- ------- ----- - ---- -------------------

------ --- ---- -------------------
------ ----- ---- ----------------------

------ - -------- - ---- --------------
------ - ----------- - ---- --------
------ ----------- ---- -------------------------------

----- ----- - ------------
  ------------
  ----------------------------------- -- -------------------------------------
--
----------------
  --------- --------------
    --------
      ------ -------- --------------- --
      ------ ------------- ----------------- --
    ---------
  ------------
  -------------------------------
--

components/App.js

-- -------------------- ---- -------
------ ----- ---- --------
------ -------------
------ - ------- - ---- --------------
------ - ----------------- ---------------- - ---- ----------------------------------

----- --- ------- --------------- -
  --------------- - -- -- -
    ------------------------------
  --

  --------------- - -- -- -
    ------------------------------
  --

  -------- -
    ----- - ------- - - -----------
    ------ -
      ---- ----------------
        -- --------------------------- -------------
        ---- --------------------
          ------- -----------------------------------------
          ------- -----------------------------------------
        ------
      ------
    --
  -
-

----- --------------- - ----- -- -
  ------ -
    -------- -------------
  --
--

----- ------------------ - -------- -- -
  ------ -
    ----------------- -- -- -----------------------------
    ----------------- -- -- ----------------------------
  --
--

------ ------- --------
  ----------------
  ------------------
-------

store/actions/counterActions.js

-- -------------------- ---- -------
------ ----- ---------------- - -- -- -
  ------ -
    ----- -------------------
  --
--

------ ----- ---------------- - -- -- -
  ------ -
    ----- -------------------
  --
--

store/reducers/counterReducer.js

-- -------------------- ---- -------
----- --------- - --

----- -------------- - ------ - ---------- ------- -- -
  ------ ------------- -
    ---- --------------------
      ------ ----- - --
    ---- --------------------
      ------ ----- - --
    --------
      ------ ------
  -
--

------ ------- ---------------

store/reducers/rootReducer.js

pages/About/About.js

-- -------------------- ---- -------
------ ----- ---- --------
------ ---------------

----- ----- ------- --------------- -
  -------- -
    ------ ---- -------------------------- ----- ---------
  -
-

------ ------- ------

styles/global.scss

-- -------------------- ---- -------
------- ----------------------------------------------------------------------
------- ---------------------------------------------------------------

---- -
  ------------ --------- -----------
  ----------- -----
  -------- --
  ------- --
-

pages/About/about.scss

总结

在本文中,我们介绍了如何使用 React、Redux 和 React-Router 搭建前端网站,并提供了完整的实例代码。希望读者可以通过学习本文的内容,掌握相关技术并在实际项目中应用。如果在其中遇到问题,可以随时进行查阅 React、Redux 和 React-Router 的相关文档。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/65a73f6badd4f0e0ff0390d8

纠错
反馈