How to copy state Redux in state of the component with hooks?

I need to do a live search.

To do this, I get a list of posts from Stora Redux
const posts = useSelector(state => state.posts);

Create a filtered list in state component
const [state setState] = useState({
 postsFiltered: []
 })


Make a request to the backend to Redux appeared posts and when they appear (2) state of the component is filled with these posts
useEffect(() => {
dispatch(showPosts())

 setState(state => ({ ...state, postsFiltered: posts })); ///(2)
 }, [dispatch]); (3)


Next I list:
return (
 state.postsFiltered.map(post => {
 return (
{post.name}
)
})
)


The problem is that the posts from Redux not get in state, I see that stor Redux is updated three times (on the page called two more action).

Also React strongly suggested adding posts to the array of the second argument useEffect (3), and when I add it starts endlessly updated.

How do I properly transfer data from reduxa in state component?

UPD: probably for the sake of need to add a search function

const onSearch = (e) => {
 const postsFiltered = posts.filter(item => item.name.toLowerCase().includes(e.target.value.toLowerCase()))
 setState(state => ({ ...state, postsFiltered }))
 }


The text changes on the fly onChange:
<Search
 placeholder="input search text"
onChange={onSearch}
 />
April 19th 20 at 12:42
1 answer
April 19th 20 at 12:44
I need to do a live search.

But if this is all a bit simplified:

// Selector
const selectPosts = (state, keyWord) => {
 if (keyWord) {
 return state.posts.filter(post =>
post.name.toLowerCase().includes(a keyWord.toLowerCase())
);
}
 return state.posts;
};

// Component
const Posts = () => {
 const [keyWord, setKeyWord] = useState(");
 const posts = useSelector(state => selectPosts(state, keyWord));

 const dispatch = useDispatch();
 useEffect(() => {
dispatch(showPosts());
 }, [dispatch]);

 return (
the <div>
<Search
 placeholder='input search text'
 onChange={e => setKeyWord(e.target.value)}
/>
the <ul>
 {posts.map((post, i) => (
 <li key={i}>{post.name}</li>
))}
</ul>
</div>
);
};

Find more questions by tags ReduxReact