如何为 Remix JS 项目提供 Redux store?

问题描述 投票:0回答:2

我一直在密切关注 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>
  );
}
react-redux remix.run
2个回答
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>);
}

0
投票

我尝试使用 PersistGate 但出现如下错误:

Cannot find module 'C:\Users\DREAMWORLD\my-remix-app\node_modules\redux-persist\lib\storage\session' imported from C:\Users\DREAMWORLD\my-remix-app\build\index.js
Did you mean to import redux-persist/lib/storage/session.js?
  at new NodeError (node:internal/errors:405:5)
    at finalizeResolution (node:internal/modules/esm/resolve:327:11)
    at moduleResolve (node:internal/modules/esm/resolve:980:10)
    at defaultResolve (node:internal/modules/esm/resolve:1193:11)
    at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:403:12)
    at ModuleLoader.resolve (node:internal/modules/esm/loader:372:25)
    at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:249:38)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:76:39)
    at link (node:internal/modules/esm/module_job:75:36)

/root.tsx

从“redux-persist/integration/react”导入{PersistGate};

<Provider store={store}>
 <PersistGate persistor={persistor}>
   <Outlet />
   <Scripts />
  </PersistGate>
</Provider>

请推荐

© www.soinside.com 2019 - 2024. All rights reserved.