При удалении элемента не создается резервное хранилище

Question

Я новичок в реакции крючков. Мне нужна помощь в повторном рендеринге магазина (из лексемы) после удаления из него предметов. Удаленный элемент удаляется из хранилища, но он не отображается, пока я не перезагружу страницу. Я использовал window.location.reload(false), но мне нужна альтернатива, которая не требует перезагрузки страницы. Помощь очень ценится.

редукторы

case "REMOVE_POST": {
      const deletePost = [
        ...state.posts.filter(item => item.id !== actions.posts.id)
      ];
      return {
        ...state,
        posts: deletePost
      };
    }

компонент

import { store } from "../../store";

...

const PostsComponent = () => {
  const storedPosts = store.getState();
  const updatedPosts = storedPosts.posts.posts;

 const deletePost = id => {
    store.dispatch({
      type: "REMOVE_POST",
      posts: { id }
    });
return updatedPosts;
  };
}

...

<button
  onClick={() => {
    deletePost(post.id);
    // window.location.reload(false);
  }}
 >
   close
</button>

Answer 1

Спасибо. Вопрос не был правильно отформатирован. Я имел в виду не редукс, а повторную визуализацию состояния после действия. Я понимаю, что состояние в компоненте не было включено. Помогло просто включение useState. Еще раз спасибо.

Answer 2

Ну, вы не можете получить доступ к магазину, просто import используя его. Или, точнее, если вы import это напрямую, вы должны вручную subscribe() внести изменения и unsubsrcibe() отключить (чтобы предотвратить утечку памяти).

Вам лучше следовать инструкциям и официальным документам и либо используйте connect() HO C или useSelector крюк . После этого ваш компонент автоматически выполнит рендеринг после изменений в магазине.