React-Redux, how to subscribe to changes in state and apply actions - react-native

Question

I am building a grid and a filters component using react, redux and material-ui
Here is how my filters state object in redux looks like
{
1: {id:1, name:'firstName', value:'John'}
2: {id:2, name:'LastName', value:'Doe'}
}
Items object in the store
{
12: {id:12, firstName:'John', lastName:'Doe', contact:''}
13: {id:13, firstName:'Mark', lastName:'Doyle', contact:''}
}
when ever the state of filters object changes in the store, I want execute applyFilters function to narrowdown items. What is the best pattern for subscribing to changes in a state object and executing an action to update the state of another object in a store? or is there a better way to handle this?
Current Implementation
I am not sure if this an anti-pattern to access state in action creator.
export function updateFilters(namespace, filter, filterText) {
return (dispatch, getState) => {
// To update filters object in the store
dispatch({
type: `${namespace}/${UPDATE_FILTERS}`,
value: filterText,
payload: filter.get('id')
})
//Actual filtering
let state = getState();
let filters = state[`${namespace}`].filters;
let items = state[`${namespace}`].items;
let filteredItems = applyFilters(items, filters);
// To update filteredItems in the store
dispatch({
type: `${namespace}/${APPLY_FILTERS}`,
payload: filteredItems
})
}
}

Answer 1

Updated answer provided your feedback and added context. You can dispatch the second action from the reducer passing in your filter object as a parameter.
for example:
function reducer1(state = initialState, action) {
switch (action.type) {
case UPDATE_ITEMS:
+//dispatch 2nd action and pass filtered object as parameter
+//the 2nd action can update the item object
-//update items object
default:
return state
}
}
There is a lot of back and forth here, so I'm going to detail an example of how I would do this given that you want to populate your store once and work on an in-memory object afterwards.
Event Handler:
handleFilterChange = (filterText) => {
this.props.updateFilter(filterText);
}
Action:
export function updateItem(filterText) {
// you could dispatch another action, but not sure why you would
return {
type: UPDATE_FILTER, filterText,
};
}
Reducer:
function updateFilterAndItem(state = initialState, action) {
switch (action.type) {
case UPDATE_FILTER:
{
const newItems = state.items.filter(text => state.items.includes(action.filterText));
return Object.assign(
{},
state,
{
items: newItems,
filter: action.filterText
});
}
}
}
This is as close an answer as I can give you based on what you're trying to do, but I would ask you to rethink this. Why keep filter text in a redux store at all? Every time the event handler is called, the entire text string will be passed down the stack anyway. I want to answer your question as best I can to the guidelines of StackOverflow, but I also want to challenge you to think about your implementation, and if there might be a simple way to achieve your desired results.