React 入门学习（十六）-- 数据共享

前端

2024-01-13 08:17:05

Redux：在 React 中实现高效的多组件数据共享

前言

在构建复杂的 React 应用程序时，组件之间的通信和数据共享变得至关重要。Redux 是一个强大的状态管理库，专门设计用于解决 React 中多组件之间的数据传递和状态管理问题。

Redux 基本概念

Redux 的核心组件包括：

Store： 一个单一的、全局状态对象，存储应用程序的所有数据。
Action： 用于如何修改 Store 状态的对象。
Reducer： 一种根据 Action 来修改 Store 状态的纯函数。

Redux 用法

使用 Redux 的一般流程包括：

创建 Store： 使用 createStore 函数创建应用程序的 Redux Store。
连接组件： 使用 connect 函数将组件连接到 Store，从而可以访问状态和分派 Action。
分派 Action： 组件可以分派 Action，以触发 Redux Reducer 更新 Store。

Redux 实战案例：计数器应用程序

让我们通过一个简单的计数器应用程序来演示 Redux 的用法：

代码示例：

计数器组件：

import React, { Component } from 'react';
import { connect } from 'react-redux';

class Counter extends Component {
  render() {
    return (
      <div>
        <h1>{this.props.count}</h1>
      </div>
    );
  }
}

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

export default connect(mapStateToProps)(Counter);

按钮组件：

import React, { Component } from 'react';
import { connect } from 'react-redux';

class Buttons extends Component {
  render() {
    return (
      <div>
        <button onClick={this.props.increment}>+</button>
        <button onClick={this.props.decrement}>-</button>
      </div>
    );
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    increment: () => dispatch({ type: 'INCREMENT' }),
    decrement: () => dispatch({ type: 'DECREMENT' }),
  };
};

export default connect(null, mapDispatchToProps)(Buttons);

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;