版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/bbsyi/article/details/82493135
redux相当于vue中的vuex。
1.安装依赖
cnpm i redux --save
cnpm i react-redux --save
2.reducer.js 主要传入state和action
const themeReducer = (state, action) => {
if (!state) return {
themeColor: 'red'
}
switch (action.type) {
case 'CHANGE_COLOR':
return { ...state, themeColor: action.themeColor }
default:
return state
}
}
export default themeReducer
3.themeSwitch.js 使用
import React, { Component } from 'react';
import {Router,Route,browserHistory} from 'react-router-dom';
// 1.引入PropTypes
import PropTypes from 'prop-types';
// 2.引入connect
import { connect } from 'react-redux';
class ThemeSwitch extends Component {
// 3.定义propTypes
static propTypes = {
themeColor: PropTypes.string,
onSwitchColor: PropTypes.func
}
constructor(props) {
super(props);
}
// 生命周期
componentWillMount(){
}
// {/*7.使用*/}
handleSwitchColor (color) {
if (this.props.onSwitchColor) {
this.props.onSwitchColor(color)
}
}
render() {
return (
<div>
{/*7.使用*/}
<button style={{ color: this.props.themeColor }}
onClick={this.handleSwitchColor.bind(this, 'red')}>Red</button>
<button
style={{ color: this.props.themeColor }}
onClick={this.handleSwitchColor.bind(this, 'blue')}>Blue</button>
</div>
);
}
}
// 4.定义mapStateToProps
const mapStateToProps = (state) => {
return {
themeColor: state.themeColor
}
}
// 5.定义mapDispatchToProps
const mapDispatchToProps = (dispatch) => {
return {
onSwitchColor:(color) => {
dispatch({ type: 'CHANGE_COLOR', themeColor: color })
}
}
}
// 6.connect连接
ThemeSwitch = connect(mapStateToProps, mapDispatchToProps)(ThemeSwitch);
export default ThemeSwitch;