Уменьшение обратного вызова-шаблона в приложении реакции redux

Question

Я пытаюсь объединить голову, используя реакцию и редукцию. Проблема, которую я имею, заключается в том, что мне кажется, что код шаблона очень много, когда приложение становится более сложным.

Например, возьмите приложение Todo из редуктора 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 ... 

Теперь обратные вызовы для Todo должны быть расширены:

• onChangeTitle (название)
• onChangeDueDate (dueData)
• onChangeOwner (владелец)
• ...

И обратные вызовы для TodoList также необходимо продлить:

• onChangeTitle (индекс , Название)
• ...

Наконец компонент верхнего уровня должен подписаться на все эти обратные вызовы и направить действие.

Это, похоже, много шаблонов, особенно когда иерархия компонентов идет еще глубже.

Моя первоначальная идея была бы, что Todo имеет только одну функцию обратного вызова:

• 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 
    })