React-Redux作用与使用说明

React-Redux作用

React-Redux的核心作用是将 Redux 的状态管理能力与 React 组件结合起来。它通过 Provider 组件将 Redux 的 store 状态传递到 React 应用的组件中，从而实现组件与 Redux 状态的双向通信。

展示组件与容器组件的对比

在 React-Redux 应用中，通常会使用展示组件和容器组件的划分方式。展示组件（Presentational Component）主要负责根据状态生成 UI 表现，通常不直接接触 Redux 的状态。容器组件（Container Component）则负责接收 Redux 的状态并根据状态变化来决定展示组件的 UI。

展示组件	容器组件
目的	展示在页面	接收 Redux 状态并处理状态变化
是否感知 Redux	不感知	需要感知 Redux 状态
获取数据	this.props	props 中的 Redux 状态
修改数据	调用 props 中的 action	通过 dispatch 函数发送 Redux action

总结：展示组件是 React 组件，容器组件是 Redux 与 React 组件的桥梁。

React-Redux 的使用方法

1. 安装

npm install react-redux --save

2. 使用方法

Provider 组件：将 Redux 的 store 状态传递给 React 组件。

connect 函数：将 Redux 的状态和 dispatch 函数注入到 React 组件中。

import { connect } from 'react-redux';
import AppContainer from './AppContainer';
export default connect()(AppContainer);

/src/
  components/
    AppContainer/
      Counter/
        index.js
    Header/
        index.js
  store/
    index.js
    reducers/
        index.js

深入理解 connect 函数

connect 函数是 React-Redux 的核心工具，用于将 Redux 的状态和 dispatch 函数注入到 React 组件中。它接受三个参数：

mapStateToProps(state, ownProps)：将 Redux 的状态树映射到 React 组件的 props 属性中。

mapDispatchToProps(dispatch, ownProps)：将 Redux 的 dispatch 函数映射到 React 组件的 props 属性中。

mergeProps（可选）：用于将映射的 props 合并到一起。

mapStateToProps 的解析

state：Redux 的状态树。

ownProps：当前 React 组件的属性。

mapDispatchToProps 的解析

dispatch：Redux 的 dispatch 函数。

ownProps：当前 React 组件的属性。

connect 的写法示例

示例 1：基本写法

import { connect } from 'react-redux';
import Counter from '../components/Counter';
import { onIncrement, onDecrement } from '../actions';
import React, { Component } from 'react';
export default connect(
  state => ({ counter: state.counter }),
  dispatch => ({
    onIncrement: () => dispatch(onIncrement()),
    onDecrement: () => dispatch(onDecrement()),
  })
)(Counter);

示例 2：直接使用装饰器

import { connect } from 'react-redux';
import React, { Component } from 'react';
import * as ActionCreators from '../actions';
@connect(
  state => ({ counter: state.counter }),
  ActionCreators
)
export default class Counter extends Component {
  render() {
    const { counter, onIncrement, onDecrement } = this.props;
    // 组件逻辑
  }
}

代码下载地址

由于篇幅限制，代码示例已经被简化到理论解释中。如果需要具体的项目代码，可以访问以下链接获取完整示例：项目代码下载地址

转载地址：http://favf.baihongyu.com/

你可能感兴趣的文章