手寫一個React-Redux，玩轉React的Context API
阿新 • • 發佈：2020-07-09
[上一篇文章我們手寫了一個Redux](https://juejin.im/post/5efec81be51d4534942dd589)，但是單純的Redux只是一個狀態機，是沒有UI呈現的，所以一般我們使用的時候都會配合一個UI庫，比如在React中使用Redux就會用到`React-Redux`這個庫。這個庫的作用是將Redux的狀態機和React的UI呈現繫結在一起，當你`dispatch action`改變`state`的時候，會自動更新頁面。本文還是從它的基本使用入手來自己寫一個`React-Redux`，然後替換官方的NPM庫，並保持功能一致。
**本文全部程式碼已經上傳GitHub，大家可以拿下來玩玩：[https://github.com/dennis-jiang/Front-End-Knowledges/tree/master/Examples/React/react-redux](https://github.com/dennis-jiang/Front-End-Knowledges/tree/master/Examples/React/react-redux)**
## 基本用法
下面這個簡單的例子是一個計數器，跑起來效果如下：
要實現這個功能，首先我們要在專案裡面新增`react-redux`庫，然後用它提供的`Provider`包裹整個`React`App的根元件：
```javascript
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux'
import store from './store'
import App from './App';
ReactDOM.render(
,
document.getElementById('root')
);
```
上面程式碼可以看到我們還給`Provider`提供了一個引數`store`，這個引數就是Redux的`createStore`生成的`store`，我們需要調一下這個方法，然後將返回的`store`傳進去：
```javascript
import { createStore } from 'redux';
import reducer from './reducer';
let store = createStore(reducer);
export default store;
```
上面程式碼中`createStore`的引數是一個`reducer`，所以我們還要寫個`reducer`:
```javascript
const initState = {
count: 0
};
function reducer(state = initState, action) {
switch (action.type) {
case 'INCREMENT':
return {...state, count: state.count + 1};
case 'DECREMENT':
return {...state, count: state.count - 1};
case 'RESET':
return {...state, count: 0};
default:
return state;
}
}
export default reducer;
```
這裡的`reduce`會有一個初始`state`，裡面的`count`是`0`，同時他還能處理三個`action`，這三個`action`對應的是UI上的三個按鈕，可以對`state`裡面的計數進行加減和重置。到這裡其實我們`React-Redux`的接入和`Redux`資料的組織其實已經完成了，後面如果要用`Redux`裡面的資料的話，只需要用`connect`API將對應的`state`和方法連線到元件裡面就行了，比如我們的計數器元件需要`count`這個狀態和加一，減一，重置這三個`action`，我們用`connect`將它連線進去就是這樣：
```javascript
import React from 'react';
import { connect } from 'react-redux';
import { increment, decrement, reset } from './actions';
function Counter(props) {
const {
count,
incrementHandler,
decrementHandler,
resetHandler
} = props;
return (
<>