Skip to main content

React Hooks(三):Redux-React-Hook

· 10 min read
戈頓
Developer & Co-founder of Tecky Academy

2019-09-03 筆者按: 現時最常用之React-Redux程式庫已加入React Hooks功能,因此讀者可以詳讀 本篇後續文章React Hooks(四)理解React Hooks在Redux應用上之最新發展。

React Hooks在React16.8.0的版本正式成為React的正式功能。正如前兩篇所言,React Hooks簡化了寫複雜代碼的難度,亦令React的函數式部件(Functional Components)亦能使用stateprops,可是傳說中React Hooks將會取代Redux呢?卻一直都是只聞樓梯響。這篇文章就會介紹一個筆者認為頗有前景的組件,就是在Github中的facebookincubator中的redux-react-hook

Redux React Hooks

一直都錯重點

Redux最革命性的創見(Innovation),在於為前端開發定下一個結構,分為state(狀態)、action(動作)、reducer等幾個重要概念。

1. 用戶互動觸發事件(event),以事件的數據建立一個新的action

2. Reducer是個函數,舊state,加action,成為一個新的state。也就是new_state = reducer(old_state , action)

3. state經由react-redux連結每個React部件,隨state改變,React亦會更新界面。

以上三點,可以綜合為以下一圖。

Redux Store

Source

最重要的是,其實步驟1及步驟2與React本身毫無關係,因此Redux不一定要與React同用,例如ngrx就是一個為了在Angular之中使用Redux。

所以一直有意見認為React Hooks可以取代Redux,其實是捉錯用神,React Hooks最能夠取代的,其實是react-redux,也就是React與Redux相連的部份。而Redux本身,只是為前端代碼提供結構。情況與React Context很相似,當React Context一推出時,亦有聲音認為Context API將可取代Redux,其實最新版本的Redux,正正是基於Context API所開發,只有將Redux的核心概念,包括action、reducer、state等概念引入React,才可以真正取代Redux。可是迄今為止,尚未見有任何類似的計劃,始終React一直以簡潔聞名,再加入Redux,就令初學者之學習曲線更為陡斜。

當React團隊宣佈React Hooks正式發佈時,Github馬上就湧現幾個方案,使用React Hooks嘗試解決Redux同React連接代碼寫法繁瑣的問題。 Google一下,就找到以下幾個方案:

1. Facebook Incubator 的 Redux React Hooks

2. 用戶 philipp-spiess 的 Use Substate

3. 用戶 martynaskadisa 的 React use Redux

4. 用戶 brn 的 rrh

在這幾個方案之中,暫時最有前景的就是第一位的Redux React Hooks,現已包括在Facebook incubator中,也就是成為正式官方方案的機會相當大。

React Redux VS Redux React Hooks

用過Redux的朋友,都知道使用Redux 時,除了使用Redux本身之外,還需要安裝一個名為react-redux的部件; 要使用Redux React Hooks,則需要安裝redux-react-hooks

下文將會分別以react-redux及react-redux-hooks建設一個簡單網站,有增量(increment)及減量(decrement)之功能,結構非常簡單,十分適合作為比較之用。

完整例子

筆者為了方便解釋及比較兩種方法之異同,特意撰寫了一個例子,開放在Tecky的Github之上,如有興趣,各位可以在以下網址可以詳閱代碼。

https://github.com/teckyio/tecky-redux-react-hooks

而完整例子亦已經部署到Github Pages之上,畫面如下:

按下increment,數字就會加1;按下decrement,數字就會減1,不斷按鈕,就可以加加減減。

代碼結構

這個簡單網站,要用React加上Redux,結構將如下圖:

Code Structure

比起上集介紹React Hooks的例子,今次明顯多了很多檔案,因為要運用Redux,需要設置一些基礎檔案,正因如此,才有reducers.jsstore.js等檔案。

相同之處

大家大概可以發現,上面多出了兩個名字以WithoutHooks結尾的檔案,而對其他檔案,不論是使用react-redux還是react-redux-hooks,都是一模一樣的。這正正就是如上文所言「步驟1及步驟2與React本身毫無關係」,因此不會有任何分別。

store.js之內,只是很簡單運用createStore建立一個新的Redux Store,任何對狀態(state)的更動都必須經由reducer去改動。

import { createStore } from 'redux';
import reducer from './reducers';

export const store = createStore(reducer);

reducers.js有甚麼呢?

const initialState = {
counter: 0,
};

export default function reducer(state = initialState, action) {
switch (action.type) {
case 'INCREMENT':
return { counter: state.counter + 1 };
case 'DECREMENT':
return { counter: state.counter - 1 };
default:
return state;
}
}

initialState 就是一個有counter是0的數值,reducer就是一個函數,支援的action有兩個, 分別是INCREMENTDECREMENT,兩個動作都十分直接,一個將counter+1,一個將counter-1 。 要留意的是,筆者在不同的case之中,都重新返回一個新的物件(object)作為新的狀態,這是使用Redux的基本原則,必須嚴格遵守。

不同之處:React-Redux

要使用React Redux,indexWithoutHooks.js需如下:

import * as React from 'react';
import { Provider } from 'react-redux';
import ReactDOM from 'react-dom';
import { store } from './store';
import Counter from './CounterWithoutHooks.';

ReactDOM.render(
<Provider store={store}>
<Counter name="Sara" />
</Provider>,
document.getElementById('root'),
);

只要將component(也就是Counter)放在Provider之內,就可以在Counter裏面讀取Redux Store。 CounterWithoutHooks.js 則需如此

import * as React from 'react';
import './styles.css';

import { connect } from 'react-redux';

export function Counter(props) {
const { counter, increment, decrement } = props;
return (
<div>
<h1>
Hello, {props.name}
{counter} times
</h1>
<div>
<button onClick={increment}>Increment</button>
<button onClick={decrement}>Decrement</button>
</div>
</div>
);
}

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

const mapDispatchToProps = (dispatch) => ({
increment: () => dispatch({ type: 'INCREMENT' }),
decrement: () => dispatch({ type: 'DECREMENT' }),
});

export default connect(mapStateToProps, mapDispatchToProps)(Counter);

對本身就已熟悉React的人,很容易就可以理解部件本身結構,唯一要增加的,則是下面兩個新值:mapStateToPropsmapDispatchToProps。 mapStateToProps將Redux Store內的counter,對照到CounterWithoutHooksprops之中, 而mapDispatchToProps則將兩個動作:INCREMENT、DECREMENT對照到props的函數,兩個都是以map開頭,正正是為了對照兩大重點:state(狀態)與dispatch(分配動作),狀態與分配動作是Redux兩個不可或缺的部份。 而更重要的是,需要用到特殊函數connect才能使我們的部件正常連接到Redux,讀取Redux Store裏面的狀態。

不同之處:Redux-React-Hooks

要用redux-react-hooks,在index.js有一些不同:

import * as React from 'react';
import { StoreContext } from 'redux-react-hook';
import ReactDOM from 'react-dom';
import { store } from './store';
import Counter from './Counter';

ReactDOM.render(
<StoreContext.Provider value={store}>
<Counter name="Sara" />
</StoreContext.Provider>,
document.getElementById('root'),
);

基本上除了Provider一個component及其props需要更改外,其他皆與react-redux的例子無異。

最大的更動,在Counter.js就可以看到,由於redux-react-hooks提供了useMappedStateuseDispatch,連接Counter的代碼可以大大簡化

import * as React from 'react';
import './styles.css';
import { useMappedState, useDispatch } from 'redux-react-hook';

export default function Counter(props) {
const counter = useMappedState((state) => state.counter);

const dispatch = useDispatch();
return (
<div>
<h1>
Hello, {props.name}
{counter} times
</h1>
<div>
<button onClick={() => dispatch({ type: 'INCREMENT' })}>
Increment
</button>
<button onClick={() => dispatch({ type: 'DECREMENT' })}>
Decrement
</button>
</div>
</div>
);
}

一個useMappedState,就扮演了mapStateToProps的角色,使用useDispatch,更可以直接於部件裏使用dispatch,無需任何特殊函數。 其中一個更明顯的好處,在於Counter的props沒有依賴任何Redux的功能,因此要寫單元測試(Unit testing)就更為簡單

結論

由上面兩段代碼可見,React Hooks確實簡化了連接React及Redux之間的代碼,而React Hooks本質較為接近函數式思維(functional thinking),也令要寫好單元測試更為簡單。當然,如上面所言,Redux-React-Hooks尚未成為正式專案,大家可以密切留意,看看是否會成為未來標準連接React及Redux的部件。