{
data: [],
filter: '',
};(data, filter) => data.filter(item => item.title.toLowerCase().includes(filter.toLowerCase())),handleSearchChange = (e, { value }) => {
this.props.dispatch(setFilter(value));
};import { createSelector } from 'reselect';
export const filterSelector = state => state.filter;
export const dataSelector = state => state.data;
export const filteredDataSelector = createSelector(
[dataSelector, filterSelector],
(data, filter) => data.filter(item => item.title.toLowerCase().includes(filter.toLowerCase())),
);const mapStateToProps = state => ({
filteredData: filteredDataSelector(state),
})export const CounterContext = React.createContext({
counter: 0,
increment: () => {},
});import React from 'react';
import { CounterContext } from './context';
class Parent extends React.Component {
increment = () => {
this.setState(state => ({ counter: state.counter + 1 }));
};
state = {
counter: 0,
increment: this.increment,
};
render() {
return (
<CounterContext.Provider value={this.state}>
{/* ... */}
</CounterContext.Provider>
);
}
}import React from 'react';
import { CounterContext } from './context';
class SomeDeepChild extends React.Component {
static contextType = CounterContext;
render() {
const { counter, increment } = this.context;
return (
<div>
<h1>Counter value: {counter}</h1>
<button onClick={increment}>increment</button>
</div>
);
}
}