用 React 和 Redux 从头开始构建 Web 应用程序-JavaScript中文网-JavaScript教程资源分享门户

React 和 Redux 是构建现代 Web 应用程序的两个重要库，其组合使用可以非常高效地构建出可扩展、高效、易维护的 Web 应用程序。本文将为你详细介绍 React 和 Redux 库的基础知识并通过示例代码带你从头开始构建一个 Web 应用程序。

React 和 Redux 介绍

React 是 Facebook 推出的一个 JavaScript 库，用于构建用户界面。它非常适合构建大型应用程序，提供了组件化开发、虚拟 DOM、单向数据流等诸多特性，并与其他库和框架很好地配合使用，特别是 Redux。

Redux 是一个状态管理库，提供了一种可预测的方式来管理应用程序中的所有状态。它解耦了组件之间的数据依赖，使得应用程序更加易维护、易扩展。Redux 包含了三个核心概念：store、action 和 reducer。

从头开始构建 Web 应用程序

创建项目

首先需要在本地创建一个项目并安装必要的依赖包，比如 webpack、babel、react、redux 等。

# 创建项目目录并进入
mkdir react-redux-app && cd react-redux-app

# 初始化 npm 项目
npm init -y

配置 webpack

为了可以让 webpack 处理和打包 React 和 Redux 的代码，需要在项目中创建一个 webpack 配置文件。

// webpack.config.js
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: 'babel-loader',
      },
    ],
  },
  resolve: {
    extensions: ['.js', '.jsx'],
  },
  devServer: {
    contentBase: path.join(__dirname, 'public'),
    port: 3000,
  },
};

配置 babel

为了可以使用最新的 JavaScript 语法和 JSX 语法，需要使用 babel 进行编译。为了支持 React 和 Redux 的语法，需要安装相关的 babel 插件。

npm install --save-dev babel-loader @babel/core @babel/preset-env @babel/preset-react

同时，为了支持 Redux 的异步操作和日志输出，可以安装 redux-thunk 和 redux-logger。

npm install --save redux react-redux redux-thunk redux-logger

创建 .babelrc 文件并进行配置：

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

编写 React 组件

创建一个简单的 Counter 组件作为示例，功能是实现加减按钮操作累加器：

import React from 'react';

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  handleIncrement = () => {
    this.setState({ count: this.state.count + 1 });
  };

  handleDecrement = () => {
    this.setState({ count: this.state.count - 1 });
  };

  render() {
    return (
      <div>
        <h1>Counter</h1>
        <p>Count: {this.state.count}</p>
        <button onClick={this.handleIncrement}>+</button>
        <button onClick={this.handleDecrement}>-</button>
      </div>
    );
  }
}

export default Counter;

配置 Redux

首先需要创建一个 store 并定义一些 actions 和 reducers，以管理应用程序中的状态。

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import logger from 'redux-logger';

const initialState = { count: 0 };

const increment = () => ({ type: 'INCREMENT' });
const decrement = () => ({ type: 'DECREMENT' });

const 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, applyMiddleware(thunk, logger));

export default store;
export { increment, decrement };

连接 React 和 Redux

为了能够在 React 组件中使用 store 中的状态，需要使用 react-redux 提供的 connect 函数：

import React from 'react';
import { connect } from 'react-redux';
import { increment, decrement } from './store';

class Counter extends React.Component {
  render() {
    return (
      <div>
        <h1>Counter</h1>
        <p>Count: {this.props.count}</p>
        <button onClick={this.props.increment}>+</button>
        <button onClick={this.props.decrement}>-</button>
      </div>
    );
  }
}

const mapStateToProps = state => ({ count: state.count });

const mapDispatchToProps = { increment, decrement };

export default connect(mapStateToProps, mapDispatchToProps)(Counter);

集成到应用程序中

现在可以将 Counter 组件集成到应用程序中，并使用 store 进行状态管理：

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

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

总结

本文针对初学者详细介绍了 React 和 Redux 的使用，通过一个简单的示例代码讲解了如何使用这两个库构建一个 Web 应用程序。希望能够对你有所帮助。React 和 Redux 拥有众多优秀的开源组件和工具，学习和使用它们可以大大提高 Web 应用程序的开发效率和质量。

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