react-redux的provider和connect使用

最新推荐文章于 2025-02-13 11:08:36 发布

原创最新推荐文章于 2025-02-13 11:08:36 发布 · 663 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#reactjs #redux

redux 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何在React应用中使用Redux进行状态管理，包括结合redux-persist实现状态持久化，以及通过Provider组件传递store。同时展示了如何创建和组合reducer，以及在Home组件中如何连接Redux，调用actions改变state，如加载状态控制。

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

src/index.js

在这里插入图片描述
引入对应组件; Provider组件包裹子组件传递store;
这里store我导出了两个变量其中persistor 是做持久化变量存储的可以看相关的api
百度: redux-persist

src/redux/store.js

在这里插入图片描述
store引入了 redux里的combineReducers 方法可以将多个reducers方法整合然后创建createStore

src/redux/reducers/demoReducer.js

在这里插入图片描述
简单的写一个reducer.js

src/redux/reducers/loadingReducer.js

在这里插入图片描述

src/view/sandbox/home/Home.js

import React,{ useEffect, useState } from "react";
import { Card, Col, Row, List, Avatar, Button } from "antd";
import { connect } from 'react-redux'
function Home(props) {

    const addLoading = () => {
        props.changeLoading(true);
        setTimeout(() => {
            props.changeLoading(false);
        }, 1000);
    }
	return (
		<div className="site-card-wrapper">
			
            <div><b>初始值</b>{props.stateNum}</div>
            <Button type="primary" shape="circle" onClick={()=>props.addNum()}>+</Button>
            <Button danger shape="circle" onClick={()=>props.reduceNum()}>-</Button>
            <Button danger shape="circle" onClick={()=>addLoading()}><IssuesCloseOutlined /></Button>
		</div>
	);
}

const mapStateToProps = (state) => {//创建一个对象
	//根据state获取不同reducer里的初始化state 在子页面props调用
	return {
        stateNum: state.DemoReducer,//reducer返回的初始变量
	}
}

const mapDispatchToProps = {
	//这里根据type可以使用对应reducer里的方法 
	//demoReducer里的方法
	addNum() {
		return { type: "addNum",}
    },
    reduceNum() {
        return { type: 'reduceNum'}
    },
    //loadingReducer里的方法
    changeLoading(res) {
        return {type: 'change_loading', payload: res}
    }
}
//  connect的用法 connect(
	//mapStateToProps 一个方法接收一个入参 state可以获取store里reducer创建的state和action 然后返回一个对象 key为新调用名
	//mapDispatchToProps 一个对象 没有返回值 对象里的函数名(自定义) 返回对应的action的type执行对state的操作
//  )(被包装的组件)
export default connect(mapStateToProps, mapDispatchToProps)(Home)