摘要：前言自推出之后，收到了不少追捧，很多問題也隨之而來。在出現之前，可以使用保存狀態和更新狀態用以應對這種情況。為了在這個用例上追趕的腳步，的需要提供副作用隔離功能。提供了一個，可以用它接入你的風格的。

React Hooks 自推出之后，收到了不少追捧， 很多問題也隨之而來。

本文就其中的一個話題展開討論：React Hooks 是否會取代傳統的Redux ?

我認為： 不會.

在我看來，相比于傳統的Class Component, Hooks 并沒有提供什么新的狀態功能，只不過是對原有的 API 做了增強。

相比之前，Hoos 更加簡潔，也提升了原生 API 的可用性，適用的場景也越來越多。

為了闡明我的觀點， 我們先做一些回顧。

Redux 是一個 可預測的狀態管理工具，可以輕松集成在 React 應用中。 它有很多優點， 比如：

單一數據源

數據共享

事務狀態

將數據狀態I/O和副作用相隔離

狀態回朔, 又稱 時光機

一系列輔助工具帶來的強大調試能力

總的來說， Redux 提供了應對大型應用的代碼組織和調試能力，在程序出錯時， 能幫你快速定位問題。

在下的這邊文章科普了Hooks的一些基礎功能， 感興趣的可以看一下。

全面了解 React 新功能: Suspense 和 Hooks

Hooks 的主要優點：

可以在函數式組件中定義數據狀態，也能通過一些Hooks來模擬生命周期方法。

邏輯復用；可以把公共邏輯抽象成一個個多帶帶的Hook， 從傳統的面向生命周期編程 轉變為面向業務邏輯編程。

共享公共行為，類似Render Props.

兩家各有所長，好在現在有 react-redux Hooks(https://react-redux.js.org/ne... 和 Reducer Hook (https://reactjs.org/docs/hook... 這樣的工具，我們就沒有必要糾結兩者之間如何選擇，雨露均沾， 美滋滋。

改變了我們編寫組件的方式， 有了更多選擇，你可以拋棄生命周期方法， 擁抱Hooks。

Render Props 這種模式也有了更好的歸宿

Redux

HOC

容器組件和視圖組件之間的隔離, 分離純邏輯和視覺效果， 更易于測試。

任何時候你都可以使用Redux 來管理狀態，只要你喜歡。
但是如果你的應用足夠簡單，只包含單個視圖，需要一個地方臨時保存狀態，不需要和其他組件共享數據，或者甚至都沒有異步I/O都沒有(有也無所謂)。 這時候就到Hooks大顯身手了，這些情景下用Redux, 當然也可以，不過這種做法叫用牛刀殺雞雞。

來看個例子：

import React, { useState } from "react";
import t from "prop-types";
import TextField, { Input } from "@material/react-text-field";

const noop = () => {};

const Holder = ({
  itemPrice = 175,
  name = "",
  email = "",
  id = "",
  removeHolder = noop,
  showRemoveButton = false,
}) => {
  const [nameInput, setName] = useState(name);
  const [emailInput, setEmail] = useState(email);
const setter = set => e => {
    const { target } = e;
    const { value } = target;
    set(value);
  };
return (
    

      

        

          
            
          
        
        

          
            
          
        
        {showRemoveButton && (
           {
              e.preventDefault();
              removeHolder(id);
            }}
          >
            ×
          
        )}
      
      
${itemPrice}
      
    
  );
};

export default Holder;

上面的例子 使用 useState 來跟蹤表單中的 name 和 email：

const [nameInput, setName] = useState(name);
const [emailInput, setEmail] = useState(email);

你可能會注意到還有一個 removeHolder ，這個action creator 來自 Redux 。這種模式下，各種方法都可以混合搭配。

在 Hooks 出現之前， 可以使用 local state 保存狀態和更新狀態 用以應對這種情況。如果是我寫這個的話， 我更傾向于把它塞到Redux中， 再通過Prop去取狀態吧。

反正到現在， 我做過的所有React應用， 都用到了Redux，原則也很簡單：

組件狀態用組件狀態，應用狀態用 Redux。 各司其職， 相得益彰。

另一個常見的疑問是， 我應該把所有的數據和狀態都放在Redux嗎？ 如果不這么做的話， 是不是就無法使用時間旅行？

答案是不會的。

因為應用中有很多狀態是臨時的，種種局限不足以為日志遙測或者時間旅行提供足夠多的信息。 除非你在做的是一個具有協同能力的文本編輯器（比如我之前參與的Lark Docs, 還有騰訊文檔等），可以把用戶的每一個操作，每一個changeSet 的數據都保存起來， 包括光標位置等信息。

每次你往Redux 里添加數據的時候， 隨之而來的是一層抽象和額外的復雜度。

換言之， 每次你要用Redux的時候， 要知道自己為啥需要用到它。 如果你的應用有如下需求， 那就可以考慮使用Redux：

需要保存或者加載狀態

跨組件共享狀態

需要與其他組件共享業務邏輯或數據處理過程

還是那個例子：

訪問鏈接： https://tffffday.com/

import React from "react";
import { useDispatch, useSelector } from "react-redux";
import { compose } from "ramda";
import page from "../../hocs/page.js";
import Purchase from "./purchase-component.js";
import { addHolder, removeHolder, getHolders } from "./purchase-reducer.js";
const PurchasePage = () => {
  // You can use these instead of
  // mapStateToProps and mapDispatchToProps
  const dispatch = useDispatch();
  const holders = useSelector(getHolders);
const props = {
    // Use function composition to compose action creators
    // with dispatch. See "Composing Software" for details.
    addHolder: compose(
      dispatch,
      addHolder
    ),
    removeHolder: compose(
      dispatch,
      removeHolder
    ),
    holders,
  };
return ;
};
// `page` is a Higher Order Component composed of many
// other higher order components using function composition.
export default page(PurchasePage);

這個組件并不處理任何DOM， 是一個純展示型的組件，并用 React-Redux hooks API 連接到 Redux 上。

之所以用到 Redux，是因為其他部分需要這個表單的數據。它的狀態不是本地化到單個組件中，而是在組件之間共享；

Redux 允許我們干凈地將副作用與其他組件邏輯分離開來，不需要我們模擬 I/O 服務。

相比 redux-thunk，我更喜歡使用 redux-saga 的原因就是后者的隔離功能）。

為了在這個用例上追趕 Redux 的腳步，React 的 API 需要提供副作用隔離功能。

Redux 與狀態管理庫有著很大區別。但本質上，也是 Flux 架構 的一個子集。

與庫相比，Redux 向來更接近一種架構和非強制性的約定（convention）。

事實上，Redux 的基本實現只需要幾十行代碼。

這也是 Redux 的一大好處。如果你想多用一些本地組件狀態和 hook API，不想把所有內容都塞到 Redux 里，那也完全沒問題。

React 提供了一個 useReducer hook，可以用它接入你的 Redux 風格的 Reducer。這對不常見的狀態邏輯、依賴狀態等內容非常有用。

如果你的用例是要將臨時狀態裝入單個組件，也可以使用 Redux 架構，但要用 useReducer hook 取代 Redux 來管理狀態。

如果你后面需要維持或共享這個狀態， 就需要把它保存到Redux里了。

Hooks 并不會替代傳統的 Redux, 它的出現為我們編寫組件提供了更多的靈活性， 更多的可能， 希望各位FEer 都能及時擁抱這個新特性， 找到自己最喜歡的開發姿勢～

行文粗淺， 若有疏漏， 還請指正。

附原文鏈接: https://medium.com/javascript...