小编Fer*_*ted的帖子
如何为 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>
);
}
推荐指数
解决办法
查看次数
在匹配上下文全局存储的任何路由之前使用加载程序？
在常规的 React 应用程序中，我会使用 Redux 来管理状态，在匹配 中的任何路由之前我会分派初始数据App，但是，在 Remix 中不建议使用 Redux，因此我useContext改为使用 Redux。
有没有一种方法可以调用加载器在/无需匹配任何路由之前获取初始数据（例如会话、对象等），然后将该数据存储在全局存储中context，然后可以由存储中的任何组件访问？这样，API 只会在应用程序初始化期间被调用。
我现在正在调用 的加载器中的初始数据root.tsx，获取它useLoaderData，然后将其作为道具传递给以StoreProvider在全局状态下分派它，但是，我认为不应该这样做。
export let loader: LoaderFunction = async ({ request }) => {
let user = await getUser(request);
const products = await db.product.findMany();
return { user: user?.username, products };
};
function App() {
const data = useLoaderData<LoaderData>();
return (
<html lang="en">
...
<StoreProvider initData={data}>
<body>
...
<Outlet />
<ScrollRestoration />
<Scripts />
{process.env.NODE_ENV === "development" && …推荐指数
解决办法
查看次数
接下来 13 — 客户端和异步服务器组件组合：“Promise<Element>”不是有效的 JSX 元素
我正在玩实验性的 Next 13app目录。
根据文档，客户端组件可以接受服务器组件，只要它作为道具即可children。
它有效，但是我确实收到类型错误
“ServerPage”不能用作 JSX 组件。它的返回类型“Promise”不是有效的 JSX 元素。类型“Promise”缺少类型“ReactElement<any,any>”中的以下属性：类型、道具、键
import ClientPage from './clientPage';
import ServerPage from './serverPage';
// app/page.tsx
export default function Home() {
// logs in the server
console.log('rendering home page');
return (
<>
<ClientPage>
<ServerPage /> // type error here
</ClientPage>
</>
);
}
serverPage.tsx组件
const fetchSomeData = async () => {
const response = await fetch('https://pokeapi.co/api/v2/pokemon/ditto');
if (!response.ok) {
throw new Error(response.statusText);
}
return response.json();
};
export default async …推荐指数
解决办法
查看次数
Windows：电子通知不显示应用程序徽标，但在其他任何地方都显示
应用程序徽标在其他任何地方都正确显示，但在通知部分显示空徽标
我知道您可以为通知添加自定义图像并传递icon属性，如下所示：
new Notification({
title: 'Test Notification',
body: 'This is a test notification',
icon: path.join(__dirname, 'icon.ico'),
});
但这不是我想改变的标志。
该应用程序构建后还会在其他地方显示正确的徽标：
我icon在创建此处BrowserWindow建议的类似属性时还添加了一个属性。
const win = splashWindow = new BrowserWindow({
width: 320,
height: 320,
// more
icon: path.resolve(__dirname, 'icon.ico'),
});
添加一个
win.setIcon(path.resolve(__dirname, 'icon.ico');
也不起作用。
这段代码全部在main.js.
我一直在检查该课程的文档App，有一个getFileIcon但似乎与此无关。
可能有关系吗？
我已经能够将应用程序名称修改为“Awesome App”，如下setAppUserModelId所示：
ipcMain.on('app-ready', () => {
if (process.platform === 'win32') {
// somehow also change logo here? can't find …推荐指数
解决办法
查看次数
Nextjs：加载或 Suspense 回退不会在生产中显示
我已使用 nextjs v13 将我的个人页面迁移到应用程序目录。
我尝试首先在组件fallback的 prop中添加 RSC 的加载程序Suspense，并添加loading位于目录中每个路由的路径处的组件app。
// src/app/posts/loading.tsx
import { Container } from '~/components/organisms/container';
export default function Loading() {
return (
<Container>
{/* Add a big loading string with tailind */}
<span className="text-6xl font-bold text-center text-red-500">Loading...</span>
</Container>
);
}
还有这样的
// src/app/posts/page.tsx
export default async function PostsPage() {
return (
<Container>
<PageHeader
title='Posts'
description="I love to write about things I'm learning.
Blogging is a great way to improve and share …推荐指数
解决办法
查看次数
标签 统计
next.js ×2
reactjs ×2
remix.run ×2
electron ×1
next.js13 ×1
react-redux ×1
typescript ×1
vercel ×1