2

hooks 中使用dva

reacts hooks已经问世很久了今天来记录下如何在hooks是使用dva,
众所周知函数是不可以是不可以使用修饰符修饰的,因为函数存在变量提升问题。
所以大多数人有选择再次掏出自己的redux,但是redux使用起来确实没有dva方便,那么下面就让我们看看如何在hooks中优雅的使用dva吧!

废话不多说直接上代码!

index.js

import React from 'react';
import { connect } from 'dva';
import {Button} from 'antd';

const mapStateToProps = (state)=> {
  return {
    home: state.home,
  }
};

const usePage = (props) => {
const {home} = props;
  const btnClick = () => {
    const {dispatch} = props;
    dispatch({
      type:"home/getList",
      payload: !home.likes
    })
  };

  return (
    <div>
      <Button onClick={btnClick}>点击有惊喜</Button>
      <span>{home.likes ? 'true' : 'false'}</span>
    </div>
  );
};
export default connect(mapStateToProps, null)(usePage);

model.js

export default {
  namespace: 'home',
  state: {
    likes: null,
  },
  effects: {},
  reducers: {
    getList(state, {payload}) {
      return {...state, likes: payload};
    },
  },
};

为了简单我连css以及副作用都不要了。够简单不? 不会还不会吧?


machinist
460 声望33 粉丝

javaScript、typescript、 react全家桶、vue全家桶、 echarts、node、webpack


引用和评论

0 条评论