【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">
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

南栀~zmt

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

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

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

打赏作者

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

抵扣说明:

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

余额充值