Как скопировать стейт Redux в стейт компонента с хуками?

Question

[angelzzz]

Мне необходимо сделать живой поиск.

Для этого я получаю список постов из стора Redux
const posts = useSelector(state => state.posts);

Создаю фильтрованный список в стейте компонента

const [state, setState] = useState({
    postsFiltered: []
  })

Делаю запрос к бекенду, чтобы в Redux появились посты и когда они появляются (2) наполняю стейт компонента этими постами

useEffect(() => {
    dispatch(showPosts())

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

Дальше я вывожу список:

return (
       state.postsFiltered.map(post => {
              return (
                     {post.name}
              )
       })
)

Проблема в том, что посты из Redux не попадают в стейт, я вижу, что стор Redux обновляется три раза (на страницы вызываются еще два экшена).

Так же React настойчиво предлагает добавить posts в массив второго аргумента useEffect (3), а когда я добавлю он начинает бесконечно обновляться.

Как мне правильно перенести данные из редакса в стейт компонента?

UPD: наверное для проформы нужно добавить функцию поиска

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

Текст меняется "на лету" по onChange:

<Search
          placeholder="input search text"
          onChange={onSearch}
        />

Comments

[Loli E1ON]

useEffect должен быть завязан на posts