Redux 实战：从零开始搭建 React 应用-JavaScript中文网-JavaScript教程资源分享门户

随着前端应用日益复杂，状态管理成为前端开发中的重要问题。Redux 是 React 生态中最为流行的状态管理库之一，它可以帮助我们更好地管理应用的状态。在本文中，我们将从零开始搭建一个 React 应用，并使用 Redux 进行状态管理。

准备工作

首先，我们需要安装必要的依赖包，包括 react、react-dom 和 redux。我们使用 npm 安装：

npm install react react-dom redux

接下来，我们创建一个新的文件夹，用于存放我们的代码。在该文件夹中，我们创建一个 index.html 文件，并引入必要的 JavaScript 和 CSS。

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Redux 实战：从零开始搭建 React 应用</title>
  </head>
  <body>
    <div id="root"></div>

    <script src="./src/index.js"></script>
  </body>
</html>

在上述代码中，我们引入了名为 index.js 的 JavaScript 文件，并在页面中添加了一个 id 为 root 的 div 元素，用于渲染 React 应用。

编写 React 组件

在 src 文件夹中，我们创建一个名为 App.js 的文件，并定义一个新的 React 组件。在此处，我们定义了一个简单的组件，用于显示一个文本：

import React from "react";

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

export default App;

在上述代码中，我们定义了一个 App 组件，该组件返回一个包含文本的 h1 元素。接下来，在 index.js 中，我们将该组件渲染到页面中。

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

const rootElement = document.getElementById("root");

ReactDOM.render(<App />, rootElement);

在上述代码中，我们使用 ReactDOM.render 方法将 App 组件渲染到 root 元素中。

现在，如果我们在浏览器中打开 index.html 文件，我们应该能够看到一个显示文本的页面。

使用 Redux 进行状态管理

现在，我们已经成功地创建了一个 React 应用。接下来，我们将使用 Redux 进行状态管理。

首先，我们需要创建一个 Redux store。在 src 文件夹中，我们创建一个名为 store.js 的文件，并定义一个新的 Redux store。在此处，我们定义了一个简单的 store，用于管理一个数字的状态：

// javascriptcn.com 代码示例
import { createStore } from "redux";

const initialState = {
  count: 0
};

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

const store = createStore(reducer);

export default store;

在上述代码中，我们使用 createStore 函数创建了一个 Redux store，并定义了一个名为 reducer 的函数。该函数接收一个名为 state 的初始状态和一个名为 action 的操作，返回一个新的状态对象。在此处，我们定义了两个操作：INCREMENT 和 DECREMENT，分别用于增加和减少数字。

接下来，在 App.js 中，我们使用 Redux store 中的状态。我们可以通过 useSelector 钩子函数来选择 store 中的状态：

// javascriptcn.com 代码示例
import React from "react";
import { useSelector } from "react-redux";

function App() {
  const count = useSelector(state => state.count);

  return (
    <>
      <h1>Count: {count}</h1>
      <button onClick={() => dispatch({ type: "INCREMENT" })}>+</button>
      <button onClick={() => dispatch({ type: "DECREMENT" })}>-</button>
    </>
  );
}

export default App;

在上述代码中，我们通过 useSelector 钩子函数选择了 Redux store 中的 count 状态，并在页面中显示了该状态。接下来，我们定义了两个按钮，用于增加和减少数字。我们可以通过 useDispatch 钩子函数获取 dispatch 方法，用于派发操作：

// javascriptcn.com 代码示例
import React from "react";
import { useSelector, useDispatch } from "react-redux";

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

  return (
    <>
      <h1>Count: {count}</h1>
      <button onClick={() => dispatch({ type: "INCREMENT" })}>+</button>
      <button onClick={() => dispatch({ type: "DECREMENT" })}>-</button>
    </>
  );
}

export default App;

现在，我们已经成功地使用 Redux 进行了状态管理。如果我们在浏览器中打开 index.html 文件，我们应该能够看到一个显示数字和两个按钮的页面。

总结

在本文中，我们从零开始搭建了一个 React 应用，并使用 Redux 进行了状态管理。我们学习了如何创建 Redux store、定义 reducer、使用 useSelector 和 useDispatch 钩子函数，以及如何派发操作。通过本文的学习，希望读者能够更好地理解 Redux 的使用方法，并能够应用到实际项目中。完整代码如下：

// javascriptcn.com 代码示例
// src/store.js
import { createStore } from "redux";

const initialState = {
  count: 0
};

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

const store = createStore(reducer);

export default store;

// javascriptcn.com 代码示例
// src/App.js
import React from "react";
import { useSelector, useDispatch } from "react-redux";

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

  return (
    <>
      <h1>Count: {count}</h1>
      <button onClick={() => dispatch({ type: "INCREMENT" })}>+</button>
      <button onClick={() => dispatch({ type: "DECREMENT" })}>-</button>
    </>
  );
}

export default App;

// javascriptcn.com 代码示例
// src/index.js
import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import store from "./store";
import App from "./App";

const rootElement = document.getElementById("root");

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  rootElement
);

// javascriptcn.com 代码示例
<!-- index.html -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Redux 实战：从零开始搭建 React 应用</title>
  </head>
  <body>
    <div id="root"></div>

    <script src="./src/index.js"></script>
  </body>
</html>

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/653f6f697d4982a6eb8fec82