如何为 Remix JS 项目提供 Redux 存储？

Question

如何为 Remix JS 项目提供 Redux 存储？

我一直在密切关注 Remix Run JS ( https://remix.run/ )，并且一直在研究一些教程，但是，我在这里或网络上没有找到如何实现 redux 存储的任何地方：

我正在考虑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>
  );
}

Run Code Online (Sandbox Code Playgroud)

Answer 1

Ali*_*mad 0

在 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>);
}

Run Code Online (Sandbox Code Playgroud)

归档时间：	4 年，4 月前
查看次数：	6792 次
最近记录：	2 年，3 月前