【React】React-Redux

本文介绍了React-Redux的基本概念和使用方法,包括React-Redux的作用、Provider组件的使用、connect高阶组件的mapStateToProps和mapDispatchToProps参数。通过示例详细讲解了如何利用React-Redux实现计数器、多组件共享store以及合并多个reducer。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >


1. React-Redux概述

  • React-Redux 是 Redux 的官方 React 绑定库。
  • React-Redux 能够使React组件从Redux store中读取数据,并且向 store 分发 actions 以更新数据。
  • React-Redux 并不是 Redux 内置,需要单独安装。
  • React-Redux 一般会和 Redux 结合一起使用。

安装redux、react-redux:

  • npm install redux;
  • npm install react-redux;

2. Provider

  • 是react-redux提供的一个React组件。
  • 作用是把state传给它的所有子组件。
  • 也就说当你使用Provider传入数据后,下面的所有子组件都可以共享数据,很方便。

使用方法: 用Provider组件包裹在最外层的组件

<Provider  store={
    store }>
	<App />
</Provider>

注意:一定是在Provider中传store


3. connect

是一个高阶组件(高阶组件:传入一个组件,它会返回新的加工后的组件)。

connect有四个参数([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])后面两个参数可以不写,不写的话它是有默认值的。
主要关注前两个参数: mapStateToProps和 mapDispatchToProps。

  • mapStateToProps:如果定义该参数,组件会监听rRedux store的变化。任何时候,
    只要 Redux store 发生改变,mapStateToProps 函数就会被调用。
  • mapDispatchToProps:如果传递的是一个对象,那么每个定义在该对象的函数都将被当作 Redux action creator,对象所定义的方法名将作为属性名;
    每个方法将返回一个新的函数,函数中dispatch方法会将 actioncreator 的返回值作为参数执行。这些属性会被合并到组件的 props 中。

使用方法:把指定的state和指定的action与React组件连接起来,后面括号里面写UI组件名

 connect(mapStateToProps,mapDispatchToProps)(TbItem)

4. 示例

4.1 利用react-redux实现计数器

  1. 目录结构
    在这里插入图片描述

  2. store.js

import {
   createStore} from 'redux';
export const ADD = 'ADD';
export const MINUS = 'MINUS';

function reducer(state = {
    count:0},action){
   
    console.log('Action:',action);
    switch (action.type) {
   
        case ADD:
            return {
    count: state.count + 1}
        case MINUS:
            return {
    count: state.count - 1}
        default:
            return state
    }
}

let store = createStore(reducer);
export default store;
  1. action.js
function add(){
   
    return {
   
        type: 'ADD',
    }
}

function minus(){
   
    return {
   
        type: 'MINUS'
    }
}

const action = {
   add,minus};

export default action;
  1. Counter1.js
import {
   connect} from 'react-redux';
import action from '../actions/action';

function Counter1(props){
   
    return(
        <>
            <p>{
   props.count}</p>
            <button onClick={
   props.add}>count++</button>
            <br/>
            <button onClick={
   props.minus}>count--</button>
        </>
    )
}

const mapStateToProps = state => state;
const mapDispatchToProps = {
   
    ...action
}

export default connect(mapStateToProps, mapDispatchToProps)(Counter1);
  1. App.js
import Counter1 from './components/Counter1';


function App() {
   
  return (
    <div className="App">
### ReactReact-Redux 集成指南 React 是一个用于构建用户界面的 JavaScript 库,而 Redux 则是一个独立的状态管理工具。为了将两者结合起来使用,React-Redux 提供了一个桥梁来连接 React 组件和 Redux Store。 #### React-Redux 的核心概念 React-Redux 主要通过两个重要成员实现其功能[^1]: 1. **`<Provider>`**: 这是一个高阶组件,用来包裹整个应用并将 Redux store 注入到所有的子组件中。 2. **`connect()`**: 它允许 React 组件订阅 Redux store 并将其映射为 props 或 dispatch 函数。 以下是它们如何工作的简单说明: - `<Provider>` 将全局状态传递给应用程序中的所有组件。 - `connect()` 方法可以让你选择哪些部分的状态被注入到特定的组件中作为属性 (props),以及定义触发 action creator 的方法。 #### 使用 React-Redux 构建基本应用的例子 下面展示的是一个简单的计数器示例: ```javascript // 导入必要的模块 import { createStore } from 'redux'; import { Provider, connect } from 'react-redux'; // 创建 Reducer 来处理 state 变化逻辑 function counterReducer(state = { count: 0 }, action) { switch (action.type) { case 'INCREMENT': return { ...state, count: state.count + 1 }; default: return state; } } // 初始化 Redux Store const store = createStore(counterReducer); // 定义 UI 组件 CounterComponent class Counter extends React.Component { render() { const { value, onIncrement } = this.props; // 解构赋值获取 props return ( <div> <span>{value}</span> {/* 显示当前计数值 */} <button onClick={onIncrement}>+</button> {/* 增加按钮 */} </div> ); } } // Map State to Props function mapStateToProps(state) { return { value: state.count, }; } // Map Dispatch to Props function mapDispatchToProps(dispatch) { return { onIncrement: () => dispatch({ type: 'INCREMENT' }), }; } // Connect the component with Redux store const ConnectedCounter = connect(mapStateToProps, mapDispatchToProps)(Counter); // 渲染根组件并提供 Redux store ReactDOM.render( <Provider store={store}> <ConnectedCounter /> </Provider>, document.getElementById('root') ); ``` 此代码片段展示了如何设置 Redux store,并利用 React-Redux 中的核心 API (`Provider`, `connect`) 实现数据流控制。 #### 关于 ReduxReact-Redux 的主要差异 虽然 Redux 负责集中存储应用的整体状态,但它本身并不知道任何关于视图层的信息。因此,当需要结合像 React 这样的框架时,就需要借助中间件或者绑定库——即此处提到的 React-Redux。具体来说: | 特性 | Redux | React-Redux | |--------------------|----------------------------------|-----------------------------------| | 功能范围 | 状态管理和分发 actions | 让 React 组件访问 Redux 数据 | | 是否依赖前端框架 | 不依赖 | 必须配合 React 使用 | 上述表格总结了两者的职责划分及其相互关系。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

南栀~zmt

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值