需不需要使用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,
      };
    },
  },
};