前言

首先呢~ 在分享前先貼上我寫的redux-chef源碼，大家如有興趣可以閱讀：redux-chef

背景：麻煩的redux社區規范

在使用redux很久以后，有一天寫著寫著，突然覺得actions/constants/reducers這一套東西顯得十分啰嗦（相信很多同學有這種感覺）

比如看redux的官方實例: todomvc。簡簡單單一個todomvc，也寫出來不少樣板代碼。

哎呀好麻煩吶，我就想簡簡單單調用改個數據流而已，為啥要我寫這么這么長的代碼？

于是乎！聽聞社區里的那個 dva 很強大，我點開官網看了看它的示例，受其啟發，忍不住也花了幾個小時寫了一個 redux-chef（不過本身和dva沒什么關系，相似的地方也就只有model的設計了）來完成我優雅修改redux數據流的設想~

什么有趣的東西？一個主廚（Chef）！

那么平常的redux，除了上述說的代碼樣板比較多之外，還有一個點也是修改同一個數據，需要跳躍好幾個文件，這也是蠻費心力的，個人感覺！

一般來說，一個reducer關注的往往只是其維護的state。那么其實可以把每個reducer維護的state、以及其所有的action維護在同一個model里面誒

根據業務設計自己的model

首先根據業務場景定義自己的model（為了節省空間，代碼省略了一部分），然后用redux-chef導出的kitchen煮一下（笑）。這樣的models數據就是經過主廚精心加工過的，可以之后在業務代碼里優雅調用了~

// models/index.ts import { kitchen } from '../redux-chef'; const Cord = {namespace: 'cord',state: { x: 3, y: 4 },action: {update(x: number, y: number) {return { x, y };},setDoubleX: () => (state: any) => {return {...state,x: state.x * 2}}},reducer: function (state: any, action: any) {//...} };const Points = {namespace: 'points',state: [],reducer: function (state: any, action: any) {//...} }; export default kitchen({ Cord, Points }); 復制代碼

備注：完整示例models代碼 -> github.com/soulizs/red…

然后在將這些加工后的models應用到我們用redux創建的store里，就可以開始在應用代碼里redux-chef設計的調用啦！

優雅又簡易的調用方式

示例使用redux-chef后的數據流調用方式如下：

// App.ts import models from './models/index.ts';function updateCord() {models.Cord.update(generateRandNum(), generateRandNum()) }function setDoubleCordX() {models.Cord.setDoubleX(); } // render <Button onClick={updateCord}>update cord x & y</Button> <Button onClick={setDoubleCordX}>double cord x</Button> 復制代碼

天吶，修改數據流只需要關注models里action函數，然后在應用里直接調用對應的model：models.Cord.setDoubleX();就完成了數據流的改動，然后將對應的state進行connect，即完成了更新后數據的讀取。

優雅的是，這種調用給應用開發者帶來了流程的簡化，只需要關注業務的開發，減少重復的樣板代碼~

備注：眼尖的同學或許會發現在 Cord model里面的這兩個actionupdate，setDoubleX有點不一樣。原因是，setDoubleX由于需要讀取model里的state，所以設計成高階函數，用以自動讀取其對應model的state！

當然這種方式也提供了使用我們自定義使用action的自由，在model.reducer會進行分發。如下示例代碼：

// actions/index.ts import { dispatch } from '../redux-chef'; export function setCordX(x: number) {dispatch({type: constants.SET_CORD_X, x}); }// App.ts import { setCordX } from './actions/index.ts'; // render <Button onClick={() => setCordX(generateRandNum())}>set cord x</Button> 復制代碼

新舊共存，毛問題~

redux-chef的設計哲學

好了使用方式上文都介紹了，其實redux-chef的設計也挺簡單的，主要是Chef(), dispatch(), cook(), kitchen(), Chef.apply()這四個API，有興趣的同學閱讀一下源碼即可（也不長）。

簡單來說：

• 自動聚合所有models的reducer返回給store應用
• 如果調用了model.action，也就是說是這種操作姿勢的話，models.Cord.setDoubleX();，會使用內部自定義的@@${__CHEF_INTERNAL_TYPE__}(${name})分發事件，本質上還是分發。

• 上文提到的，如果model.action需要使用本身的state作為依賴計算的話，利用高階函數自動傳入state。

• 沒什么問題是不能用多一層抽象解決的！

小結

建議大家在看完此文后，拉下此倉庫運行一下看看！請點擊：redux-chef（注意是improve-reading分支）

不建議大家在生產環境使用redux-chef。由于社區里存在很多優秀的應用框架，比如 dva 等等。（備注：本人也只是純粹隨便敲敲而已，暫不發布，也不做維護~

謝謝大家的閱讀！當然還有很多優化和設計的空間，大家如果有想法與建議，歡迎評論~

（為什么起這個名字 redux-chef？因為我經常在半夜敲代碼時感到饑餓...）

轉載于:https://juejin.im/post/5cd155e2e51d456e7079f2df

總結

以上是生活随笔為你收集整理的设计实现优雅修改redux数据流的一个库 - redux-chef的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。