在反應減少應用程序中減少回調樣板

Question

我想讓我的頭腦一起使用react和redux。我遇到的問題是，當應用程序變得更復雜時，我覺得很多樣板代碼都是這樣。

例如，從redux documentation獲取Todo應用程序。讓我們假設我們想延長例如，給出一個待辦事項多個屬性：

• 冠軍
• 一個到期日
• 一個所有者
• 更多的東西

現在，我想add addtional修改這些屬性的操作：

const ADD_TODO = 'ADD_TODO' 
const REMOVE_TODO = 'REMOVE_TODO' 
const TOGGLE_TODO = 'TOGGLE_TODO' 
const CHANGE_TITLE = 'CHANGE_TITLE' 
const CHANGE_DUEDATE = 'CHANGE_DUEDATE' 
const CHANGE_OWNER = 'CHANGE_OWNER' 
... more stuff ... 

現在對於藤的回調都必須通過擴展：

• onChangeTitle（標題）
• onChangeDueDate（dueData）
• onChangeOwner（所有者）
• ...

而且回調對於TodoList也必須擴展：

• onChangeTitle（index標題）
• ...

最後的頂級組件必須訂閱所有這些回調，並派遣行動。

這似乎是很多樣板，特別是當組件層次更深時。

我最初的想法是，那藤只有一個回調：

• 的onChange（newData）

和TodoList的：

• onChangeTodo（指數，newData）

但是比newData必須在Todo中創建，這基本上意味着在那裏實現類似reducer的東西。

我在這裏得到正確的想法嗎？我能減少這個嗎？

Answer 1

我會做這樣的事情：

const TODO_PROPERTY_UPDATE = 'TODO_PROPERTY_UPDATE'

這將被用於TODO（title，duedate，owner等的所有屬性）

操作：

export function updateTodoProperty(index, property, propertyValue) { 
    return { type: TODO_PROPERTY_UPDATE, index, property, propertyValue } 
} 

在你減速機：

case TODO_PROPERTY_UPDATE: 
    return state.map((todo, index) => { 
    if (index === action.index) { 
     return Object.assign({}, todo, { 
     [action.property]: action.propertyValue 
     }) 
    } 
    return todo 
    })