react-redux的使用及浅理解
react-redux可以理解为react的数据库,跟vue中的vuex还是有点像的,我是理解了vuex后然后再来看react-redux,相对会好理解一点,先推荐一下更容易理解的一篇文章(https://www.cnblogs.com/bax-life/p/8440326.html),以下是我的理解,记录一下。
安装
yarn add redux react-redux --dev
使用
在index.js中导入Provider,createStore,reducer然后创建store
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { BrowserRouter } from 'react-router-dom'
import './assets/css/style.css';
import './assets/font/iconfont.css';
import * as serviceWorker from './serviceWorker';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import reducer from './redux/reducer'
//创建store
const store = createStore(reducer);
ReactDOM.render(
<BrowserRouter>
<Provider store={store}>
<App />
</Provider>
</BrowserRouter>,
document.getElementById('root'));
serviceWorker.unregister();
action.js
const jia = {
type:"ADD"
}
const jian = {
type:"DEL"
}
export {jia,jian};
reducer.js
const num = 0;
const reducer = (state=num,action)=>{
switch (action.type){
case "ADD":
return state += 1;
case "DEL":
return state -= 1;
default:
return state;
}
}
export default reducer;
在使用的地方,导入connect、action,然后用connect把react和redux连接起来。核心mapStateToProps、mapDispatchToProps函数
import React, { Component } from 'react';
import Loading from './../public/loading';
import {jia,jian} from './../../redux/action';
import { connect } from 'react-redux';
class Center extends Component {
constructor(props){
super(props);
this.state = {
page:"center",
loadingFlag:true
};
}
componentDidMount(){
this.setState({
loadingFlag:false
});
}
render() {
const { PayIncrease, PayDecrease } = this.props;
return (
<div className="center">
<h2>当月工资为{this.props.num}</h2>
<button onClick={PayIncrease}>升职加薪</button>
<button onClick={PayDecrease}>迟到罚款</button>
<Loading loadingFlag = {this.state.loadingFlag} />
{this.state.page}
</div>
);
}
}
//需要渲染什么数据
function mapStateToProps(state) {
return {
num:state
}
}
//需要触发什么行为
function mapDispatchToProps(dispatch) {
return {
PayIncrease: () => dispatch(jia),
PayDecrease: () => dispatch(jian)
}
}
// export default Center;
export default connect(mapStateToProps, mapDispatchToProps)(Center);
获取redux中的数据
import React, { Component } from 'react';
import { NavLink } from 'react-router-dom';
import { connect } from 'react-redux';
class Navbar extends Component {
render() {
console.log(this.props.num);
return (
<div className="nav">
<NavLink activeClassName="cur" to='/'><i className="iconfont icon-shouye"></i>首页</NavLink>
<NavLink activeClassName="cur" to='/classify/all'><i className="iconfont icon-fenlei"></i>分类</NavLink>
<NavLink activeClassName="cur" to='/buy' style={{position:'relative'}}><i className="iconfont icon-gouwuche"></i>购物车<span style={{position:"absolute",top:'0',right:'0'}}>{this.props.num}</span></NavLink>
<NavLink activeClassName="cur" to='/center'><i className="iconfont icon-wode"></i>我的</NavLink>
</div>
);
}
}
//需要渲染什么数据
function mapStateToProps(state) {
return {
num:state
}
}
// export default Navbar;
export default connect(mapStateToProps)(Navbar);
欢迎关注小程序,感谢您的支持!