React redux избранное действие

Question

Я новичок в мире реакции-редукции и испытываю некоторые проблемы с визуализацией части сложного потока данных (я думаю).

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

В настоящее время я запускаю действие для добавления/удаления идентификатора дорожки в/из массива избранных. Но я не могу понять, как исходить оттуда.

Мой план состоит в том, чтобы вызвать другое действие, например. редуктор trackItem для прослушивания и продолжения. Или каждый связанный компонент может напрямую подписаться на изменения коллекции избранных? Или у меня есть два редуктора, которые слушают одно и то же действие? Теперь у меня есть идея, как реализовать что-то подобное, а также у меня есть ощущение, что я на неправильном пути.

Чувствуется, что я изо всех сил стараюсь избавиться от привычек магии к магии. Как бы вы это сделали?

Мой другой план состоит в том, чтобы иметь beFavorited boolean в элементе трека json и использовать действие/сводит к обновлению/переключению этого свойства. Я понимаю, что normalizr объединит экземпляры с одним и тем же идентификатором, поэтому любой компонент, подписавшийся на его изменения, будет реагировать.

Answer 1

Или может каждый компонент в связи с непосредственно подписаться на изменения коллекции избранного

Они могли. Но все эти компоненты имеют общий компонент? Если это так, я бы хотел, чтобы этот родительский компонент подписался на изменение состояния массива избранных и передал его в качестве реквизита для компонентов, которые в нем нуждаются.

Я рекомендовал бы действительно читаю через Redux документы: https://rackt.github.io/redux/

Особенно использование с React: https://rackt.github.io/redux/docs/basics/UsageWithReact.html

Как правило, вы бы «умный» компонентом, который визуализирует на маршрут, и что бы подписаться на рассылку redux хранить и передавать данные, которые нужны его вложенным «немым» компонентам.

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

Answer 2

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

Связаны ли ваши компоненты с общим родительским компонентом? Если они это сделают, connect это ваше состояние приложения redux и передайте любимый массив идентификаторов до каждого; затем отправьте действие addFav или removeFav из любого компонента, отреагируйте на редуктор favorites и посмотрите, как редукт пропускает новые опоры для взаимодействия компонентов.

Answer 3

Я думаю, вы должны сначала понять о умных и немых компонентах в reactjs, вот link, так что у вас будет один умный, который подключается к вам редуктором и обновляет ваш дочерний (немой) компонент.

Если вы все еще хотите иметь два редуктора, вы можете выполнить действие, выполняющее его действие, в результате чего оно вызывает другое действие.для достижения этой цели необходимо иметь redux-async-transitions, код примера приведен ниже

function action1() { 
return { 
    type: types.SOMEFUNCTION, 
    payload: { 
    data: somedata 
    }, 
    meta: { 
    transition:() => ({ 
    func:() => { 
    return action2; 
    }, 
    path : '/somePath', 
    query: { 
    someKey: 'someQuery' 
    }, 
    state: { 
    stateObject: stateData 
    } 
    }) 
    } 
} 
}