'react-redux'

最新推荐文章于 2025-06-19 14:39:21 发布

lx_9119

最新推荐文章于 2025-06-19 14:39:21 发布

阅读量98

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/lx_9119/article/details/102694634

本文详细介绍了一个使用React和Redux实现的状态管理应用案例。通过一个简单的计数按钮组件，展示了如何将组件与Redux store连接，实现状态的读取与更新。文章深入探讨了mapStateToProps和mapDispatchToProps函数的应用，以及如何在组件中触发action来改变全局状态。

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

import React,{Component,Fragment} from "react";
import {connect} from "react-redux"
//import {mapStateToProps,mapDispatchToProps} from "./OneState"
class One extends Component{
	render(){
		let {n} = this.props
		return <Fragment>
			<button onClick={this.props.add.bind(this)}>{n}</button>
		</Fragment>
	}
}

/*function One(props){
	let {n} = props
	return <Fragment>
			<button onClick={props.add.bind(this)}>{n}</button>
		</Fragment>
}*/
const mapStateToProps=(state)=>{
	var {...state} = state.numRuducer
	return {n:state.n}
}
const mapDispatchToProps=(dispatch)=>{
	return {
		add(){
			dispatch({
				type:"ADD"
			})
		}
	}
}
export default connect(mapStateToProps,mapDispatchToProps)(One)

import React,{Component,Fragment} from 'react';
import One from './components/One';
import {Provider} from 'react-redux';
import store from './store';
class App extends Component{
	constructor(props){
		super(props)
	}
	render(){
		return <Fragment>
			<Provider store = {store}>
				<One />
			</Provider>
		</Fragment>
	}
}

export default App;