Как правильно обновлять список в React Redux?

Question

[Сергей Николаев]

У меня есть Store:

{
filters: {category: [1,2], tag: [3]},
list:[]
}

Есть редьюсер и экшен:

//Reducer
 case FILTERS_CHANGED:
      return state.merge({filters: state.filters.merge(action.payload)});
//Action
return dispatch => {
  dispatch({type: constants.RESEARCH_FILTERS_CHANGED, payload: filter});
};

Из компонента Filters я изменяю объект filters из store при помощи action выше.
Как заставить делать запрос и ответ записывать в store.list при каждом изменении store.filters?

В Angular2 я бы сделал что-то вроде:

store.filters.subscribe(filters => {
//вызов action для подгрузки данных с бека и добавления их в лист
loadListAction(filters);
});

Как делать правильно подобное в React+Redux?

Answer 1

[Егор]

1) У redux есть метод subscribe.

2) Или поискать готовый плагин. Например: redux-watch, redux-subscribe, redux-changes. Естественно можно найти много других подобных плагинов и выбрать какой нужно.

Comments

[Сергей Николаев]

А Subscribe в action делать или в component лучше?

[Сергей Николаев]

еще в решениях типо этого
https://github.com/andrewngu/sound-redux
в соурсах ни одного subscribe не замечено
по всей видимости в реакте есть возможность как то более гибко и красиво это сделать

[Егор]

Можно попробовать в mapStateToProps обернуть state.filters и там уже делать с ним все что нужно

[Егор]

*обернуть в action creator

[Aves]

Сергей Николаев: stackoverflow.com/questions/35262692/how-to-fire-a...
subscribe самый прстой вариант отслеживать state
В sound-redux сделано через навигацию - меняется роут, монтируется компонент, выполняется componentDidMount, оттуда диспетчится action, например fetchSongsIfNeeded

[Сергей Николаев]

Aves: во спасибо за разъяснение :)

Answer 2

[amiksam]

я бы сделал через Redux Middleware.

Добавляем middleware after.js

export default store => next => action => {
const {type} = action

const result = next(action)
switch (type) {
case constants.RESEARCH_FILTERS_CHANGED:
store.dispatch(loadListAction(store.getState().filters));
break;
}

return result
}