Как должна быть Анатомия Редукса?

Question

Я работаю в сложном приложении React, которое обрабатывает асинхронные вызовы, которые привносят объекты Deeply Big JavaScript. Мне было интересно, какой лучший способ создать состояние для хранения этих объектов. В документах Redux указано:

В более сложном приложении вы захотите, чтобы разные объекты ссылались друг на друга. Мы предлагаем вам сохранить ваше состояние как можно более нормализованным, без какого-либо гнездования. Храните каждый объект в объекте, хранящемся с идентификатором в качестве ключа, и используйте идентификаторы для ссылки на другие объекты или списки. Подумайте о состоянии приложения как базы данных. Этот подход подробно описан в документации normalizr. Например, сохранение todosById: {id -> todo} и todos: array внутри состояния было бы лучшей идеей в реальном приложении, но мы придерживаемся простого примера.

Если я храню ссылки только в своем состоянии, где я должен хранить свои объекты?

Имеет ли этот вопрос смысл?

Что лучше для состояния Redux? Большое уплощенное состояние? Или среднее, не сплюснутое состояние?

Answer 1

Объекты также должны храниться в магазине redux. Идея состоит в том, что вы можете иметь ссылки на другие объекты по идентификаторам, а не на вложение полных объектов. Вы можете также указать пример на этой странице: http://redux.js.org/docs/recipes/reducers/NormalizingStateShape.html

Answer 2

Если я храню ссылки только в своем состоянии, где я должен хранить свои объекты?

Вы по-прежнему сохраняете свои объекты в штате. То, что это цитата пытается сказать, вместо того, чтобы хранить список несделанного:

{ 
    todos: [ 
    { 
     id: '1', 
     value: 'Pay rent', 
     completed: false 
    }, 
    { 
     id: '2', 
     value: 'Buy food', 
     completed: true 
    } 
    ] 
} 

Вы можете хранить ToDos ссылки по идентификатору и в списке задач вы сохранить ссылку на него:

{ 
    todosById: { 
    1: { 
     id: '1', 
     value: 'Pay rent', 
     completed: false 
    }, 
    2: { 
     id: '2', 
     value: 'Buy food', 
     completed: true 
    } 
    }, 
    todos: [1, 2] 
} 

Есть несколько преимуществ такого подхода. Редактирование todo очень просто, и вам не нужно прикасаться к состоянию todos. Если позже вы хотите сослаться на TODO в другом списке несделанного, вам не нужно скопировать весь объект Todo, вы просто создать новый список со ссылками, например:

allTodos: [1, 2], 
urgentTodos: [1] 

Что касается вашего второго вопроса :

Что лучше для состояния Редукса? Большое уплощенное состояние? Или среднее, не сплюснутое состояние?

Это действительно зависит от вашего приложения.