React 入门之旅：创建基于 HTML + Redux.js 的 Demo

2024-01-03 02:53:05

邂逅 React：前端开发的新篇章

React 是一个强大的 JavaScript 库，用于构建用户界面。它采用组件化的设计思想，允许你将复杂的 UI 分解成更小的、可重用的组件，从而提高开发效率和代码的可维护性。React 广泛应用于构建单页应用程序 (SPA)，其高效的虚拟 DOM 机制能够极大地提高应用程序的性能。

携手 Redux.js：管理状态的利器

Redux.js 是一个状态管理库，可以帮助你管理应用程序的全局状态。它遵循单一状态树的原则，将整个应用程序的状态存储在一个中心化的 store 中，并通过纯函数来更新状态。Redux.js 的引入使得 React 应用的状态管理变得更加简单和可控。

构建 HTML + Redux.js 的 Demo

现在，让我们开始构建一个简易的 HTML + Redux.js 的 Demo。我们将创建一个计数器应用，用户可以点击按钮来增加或减少计数器的值。

第一步：初始化项目

首先，我们需要创建一个新的 React 项目。你可以使用 create-react-app 工具来快速创建一个新的项目。

npx create-react-app my-react-app

第二步：安装 Redux.js

接下来，我们需要安装 Redux.js 和 react-redux。

npm install redux react-redux

第三步：创建 Redux store

在 src 文件夹中创建一个名为 store.js 的文件，并在其中创建 Redux store。

import { createStore } from "redux";

const initialState = {
  count: 0
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case "INCREMENT":
      return { ...state, count: state.count + 1 };
    case "DECREMENT":
      return { ...state, count: state.count - 1 };
    default:
      return state;
  }
};

const store = createStore(reducer);

export default store;

第四步：创建 React 组件

在 src 文件夹中创建一个名为 Counter.js 的文件，并在其中创建 React 组件。

import React, { useState } from "react";
import { useSelector, useDispatch } from "react-redux";

const Counter = () => {
  const count = useSelector((state) => state.count);
  const dispatch = useDispatch();

  const increment = () => {
    dispatch({ type: "INCREMENT" });
  };

  const decrement = () => {
    dispatch({ type: "DECREMENT" });
  };

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
    </div>
  );
};

export default Counter;

第五步：集成 Redux store

在 src/index.js 文件中，将 Redux store 与 React 应用集成。

import React from "react";
import ReactDOM from "react-dom";
import Counter from "./Counter";
import { Provider } from "react-redux";
import store from "./store";

ReactDOM.render(
  <Provider store={store}>
    <Counter />
  </Provider>,
  document.getElementById("root")
);