本文共 2190 字，大约阅读时间需要 7 分钟。

React-Redux作用与使用说明

React-Redux作用

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

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

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

总结：展示组件是 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/