我一直在密切关注 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>
);
}
在 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>);
}
我尝试使用 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>
请推荐