react-redux的使用及浅理解

作者: MJ 分类: react 发布时间: 2019-01-18 14:55

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);

 

欢迎关注小程序,感谢您的支持!

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

发表评论

电子邮件地址不会被公开。 必填项已用*标注