Как обновить значение вложенного объекта в редукторе?

Question

я построил свое состояние, как так

const list = { 
    categories: { 
    Professional: { 
    active: false, 
    names: [ 
     { 
     id: 1, 
     name: "Golf", 
     active: false 
     }, 
     { 
     id: 2, 
     name: "Ultimate Frisbee", 
     active: false 
     } 
    ] 
}} 

В моем действии я добавил вариант ID, так что я хотел бы изменить статус активного, когда пользователь нажимает возможность сделать так

Я использую Неизменяемый JS, хотя и не женат на нем. Мне интересно, как настроить таргетинг на идентификатор объекта и обновить его активный статус в редукторе? Я также открыт для отзывов о том, как лучше улучшить свое состояние

Answer 1

Это очень распространенная вещь и, на самом деле, довольно сложная задача. Насколько я знаю, в простом JS нет действительно хорошего и хорошо принятого решения. Первоначально использовались Object.assign подхода:

return Object.assign({}, state, { 
    categories: Object.assign({}, state.categories, { 
    Professional: Object.assign({}, state.Professional, { 
     active: true 
    }) 
    }) 
}); 

Это слишком просто и громоздкое, я признаю это, но я должен сказать, что мы построили несколько больших приложения с этим подходами, и для числа символов, за исключением является неплохо. В настоящее время, самый популярный подход с использованием Object spread:

return { 
    ...state, 
    categories: { 
    ...state.categories, 
    Professional: { 
     ...state.categories.Professional, 
     active: true 
    } 
    } 
} 

Второй подход является гораздо более чистым, так что если вы используете обычный JS, то кажется, хороший выбор. В Immutable.js я должен признать, что это проще, просто сделать следующий

return state.updateIn(['categories', 'Professional'], x => x.set('active', true)); 

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

И ваш последний вопрос относительно улучшения состояния - обычно лучше не иметь такого глубокого гнездования (разделяйте свои проблемы, очень часто поля не зависят друг от друга), как active статус может быть разделен на другой объект), но трудно сказать из-за незнания вашего домена. Кроме того, считается, что ваши данные являются normalize.

Answer 2

В разделе «Редюкс» раздела Structuring Reducers это распространяется. В частности, см. Раздел Immutable Update Patterns. Приведенные примеры предназначены для простых объектов JS и массивов, но применяется тот же подход - map() над списком, вернуть существующий элемент для всего, что вы не хотите обновить и вернуть новую версию для той, которую вы do хотите обновить.

В документах также обратите внимание, что при обновлении данных в нормализованной структуре проще обновить конкретный элемент, так как вы можете искать его по идентификатору напрямую. Раздел «Структурирующие редукторы» также охватывает нормализацию.