需不需要使用redux以及hook中怎么使用dvajs （reaxt-redux）

  在react项目中，用到的redux是 react-redux依赖包。通过使用高阶函数connect来连接组件，第一个参数是namespace里面唯一的state，第二个是action动作的标识。

最开始时候我一般都是用dvajs来写数据流，没学过的可以看下https://dvajs.com/    非常简单。

因为之前开发我们项目都是用的dvajs，后面写着写着发现，我不用dvajs不用redux也能实现，也能解决一些问题，为什么还要写稍微复杂的model呢？然后执迷于到底要不要用，不清楚是否需要用到，于是去探究了一下，下面是经典的一段话。很好的总结，解决了我的疑惑。

需不需要使用redux：

如果你不知道是否需要 Redux，那就是不需要它。

只有遇到 React 实在解决不了的问题，你才需要 Redux 。

今天看到一篇文章写的不错引用过来一下：原文连接 https://www.html.cn/qa/react/15870.html。

基础知识：

• react的state和redux的state根本是完全不沾边的两个东西，切记不要混为一谈。react的state是存在于类组件中的一个存放自身变量的属性，redux的state整个应用的store中的某一个namespace下的状态。二者没有任何关系。

• redux是一个独立于react的，你可以选择使用也可以选择不适用，如果您不是使用的基于redux的脚手架，那么想使用redux您是需要单独引用的。react包中并没有redux。

• 假如您的应用中要使用redux，您是需要将react和redux关联起来的，这里有一个包叫react-redux，是用来关联react和redux的，其中有一个高阶函数叫connect，它接受两个方法，mapStateToProps和mapDispatchToProps是这两个方法将redux的state注入到了react的props中。

redux的使用场景：

• 如果您的React应用中状态十分多，难以维护的时候，这个时候redux是个不错的选择。（这里所说的状态就是react的state）

• 如果您需要数据共享，即多个react组件需要用同一个数据源。

• 如果您需要一些全局性的状态控制，比如应用中的当前登录人，我们说不定会在哪个组件中使用登录人信息，如果我们将它注册到全局redux中，那么我们就无需关系哪个组件要用了，我们用的时候直接从全局redux中取就行

• 某组件的业务逻辑过于复杂，在react组件中处理这些数据太过繁琐，我们可以考虑将部分逻辑拆分到redux中。

• 使用redux可以将数据和UI分离开，如果您为了实现这样的效果，您可以尝试使用redux.

hook中使用dvajs：

=======index.jsx文件====

import React, { Component, useState, useEffect } from 'react';
import { connect } from 'dva';

const mapStateToProps = (state) => {
  return state['testModel'];
};

//@connect 这种语法糖写法在函数式组件不能用
function usePage(props) {

  return <div>
    {console.log('props', props)}
    测试models页面
    <span onClick={() => props.dispatch({ type: 'testModel/testFetch' })}>点击</span>
  </div>;

}

export default connect(mapStateToProps, null)(usePage);

=======model.jsx文件====

export default {
  namespace: 'testModel',

  state: {
    data: 11111111111,
    isBoole: 222222,
  },

  effects: {
    * testFetch({ payload }, { call, put, select }) {
      let response = yield call(getAllProduct);
      let selectData = yield select(state => state.global);
      console.log('response', response);
      console.log('selectData', selectData);
    },
  },

  reducers: {
    changeCollapsible(state, { payload }) {
      return {
        ...state,
        data: payload,
      };
    },
  },
};