Как предоставить магазин Redux для проекта Remix JS?

Question

Как предоставить магазин Redux для проекта Remix JS?

Я внимательно следил за Remix Run JS (https://remix.run/) и работал с некоторыми учебными пособиями, однако нигде не нашел ни здесь, ни в Интернете, как реализовать хранилище избыточности:

Я думал в обертке App компонент вроде этого, но я не уверен, что так и должно быть:

      const store = createStore(rootReducer);

export default function App() {
  return (
    <Provider store={store}>
      <html lang="en">
        <head>
          <meta charSet="utf-8" />
          <meta name="viewport" content="width=device-width,initial-scale=1" />
          <Meta />
          <Links />
        </head>
        <body>
          <Link to="/posts">Posts</Link>
          <Outlet />
          <ScrollRestoration />
          <Scripts />
          {process.env.NODE_ENV === "development" && <LiveReload />}
        </body>
      </html>
    </Provider>
  );
}

12

react-redux remix.run

Источник

user13772033 20 янв '22 в 05:28

2 ответа

Другие вопросы по тегам react-redux remix.run

user4840789 20 янв '22 в 07:42 2022-01-20 07:42 · Answer 1 · 2022-01-20 07:42

Почему вы хотите использовать Redux с Remix? Загрузчики, действия и т. д. предназначены для правильной обработки ваших данных на стороне сервера (действия будут перезапускать загрузчики и т. д.). Для другого состояния на стороне клиента вы можете использовать React Context и прочее. Поэтому я не думаю, что Redux действительно нужен в приложении Remix. Дело не в том, что это невозможно, но я думаю, вам следует подумать, как не использовать его.

user10413070 25 окт '23 в 10:23 2023-10-25 10:23 · Answer 2 · 2023-10-25 10:23

в app/root.tsx вы можете добавить его вот так

      import {Provider} from 'react-redux';
import {store} from '~/redux/store'; 
.....

export default function App() {
const nonce = useNonce();
const data = useLoaderData<typeof loader>();
return (
<html lang="en">
  <head>
    <meta charSet="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <Meta />
    <Links />
  </head>
  <body>
    <Provider store={store}> // here
      <Layout {...data}>
        <Outlet />
      </Layout>
    </Provider>
    <ScrollRestoration nonce={nonce} />
    <Scripts nonce={nonce} />
    <LiveReload nonce={nonce} />
  </body>
</html>);
}