Как скопировать Redux store в состояние компонента с помощью хуков?

Question

Я делаю компонент поиска в реальном времени

Я получаю сообщения от Redux

const posts = useSelector(state => state.posts);

Чем я создаю массив postsFiltered в состоянии компонента

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

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

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

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

Далее я показываю этот список:

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

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

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

Как правильно получить данные из Redux в состояние компонента?

Здесь также есть функция фильтрации результатов поиска

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}
        />

Answer 1

Вы должны использовать useSelect для сообщений, использоватьState для поиска строки ввода и использоватьMemo для FilterPosts.

const posts = useSelect(state => state.posts);
const [search, setSearch] = useState('');
const filtered = useMemo(() => posts.filter(({name}) => name.toLowerCase().includes(search), [search, posts]);