小编Kai*_*oze的帖子

我正在学习 Typescript，并且正在尝试实现一个简单的 React/Redux 应用程序。当我使用同步操作时，它工作正常，但问题出在异步操作上。我正在关注官方的 redux 教程。

首先我声明会话的状态

export interface UserSessionState {
  loggedIn: boolean;
}

然后我声明动作的接口

interface UpdateSessionAction {
  type: 'USER_LOGIN';
  payload: boolean;
}

我用联合类型导出它们

export type UserActionTypes = UpdateSessionAction;

然后我有实际的行动

export function updateSession(loggedIn: UserSessionState) {
  return {
    type: 'USER_LOGIN',
    payload: loggedIn,
  };
}

我有一个假的 api 调用

function api() {
  return Promise.resolve(true);
}

最后登录

export const userLogin = (): ThunkAction<
  void,
  {},
  {},
  AnyAction
> => async (dispatch: ThunkDispatch<{}, {}, AnyAction>) => {
  const res = await api();
  dispatch(updateSession({ loggedIn: res …

我正在学习Redux,随着react-router-dom的新变化,我有点困惑.我有这些文件:

Index.js

import React from 'react';
import { Provider } from 'react-redux';
import ReactDOM from 'react-dom';
//  import { AppContainer } from 'react-hot-loader';
import App from './containers/App';
import store from './store';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root'),
);

App.js

import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import * as actionCreators from '../actions/actionCreators';
import Main from '../components/Main';

function mapStateToProps(state) {
  return {
    search: state.search,
    navigation: state.navigation,
  };
}
export function mapDispatchToProps(dispatch) {
  return bindActionCreators(actionCreators, dispatch); …

我创建了一个简单的 Hook，每次调整元素大小时，它都会ResizeObserver在幕后运行setState更新。

它在浏览器中工作，但现在我遇到的问题是我不知道如何为它编写测试。我尝试过，react-testing-library/hooks但从未调用过钩子，我认为是因为 ResizeObserver。

我尝试过 Jest、Enzyme、@testing-library，但我找不到真正针对它运行测试的方法。

基本上，在测试中，我创建了一个组件

function Component {
  const [ref, width] = myHook();

  return (
     <div ref={ref}>{width}</div>
  )
}

然后我设置，例如：

window.innerWidth = 400（我试图调整大小并调用act函数内部的钩子，但什么也没有）。此时钩子将读取ref.current.width并返回width值

我希望value在调整大小时发生变化，但事实并非如此。然而，这个确切的组件在浏览器中使用时可以正常工作。我怎样才能确保它ResizeObserver 被调用？我也导入了 polyfill 但什么也没导入。模拟 ResizeObserver 将使我无法测试钩子，并且我无法在 React 函数之外调用钩子！任何帮助表示赞赏，谢谢！

我想重新开发一个功能分支。我正在使用PhpStorm Git集成，并且有2个不同的开发分支：

refs/remotes/origin/develop
refs/heads/develop

为了不弄乱事情，我必须选择重新设置哪一个？

我正在构建一个 NextJS 应用程序，并且我有一系列pages/dashboard/*想要保护的路由器。我正在使用 Prisma，但目前我想做的是仅当用户登录时才能够访问路由。我正在使用 Google 提供商，并且一切都设置正确。这是我的中间件.ts

export { default } from "next-auth/middleware"

export const config = { matcher: ["/dashboard"] }

很简单。这是我的 [...nextAuth] 文件

从“next-auth”导入NextAuth，{NextAuthOptions}从“next-auth/providers/google”导入GoogleProvider从“@next-auth/prisma-adapter”导入{PrismaAdapter}从“@/lib/db”导入{prisma} /棱镜”

export const authOptions: NextAuthOptions = {
  adapter: PrismaAdapter(prisma),
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID as string,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET as string,
      authorization: {
        params: {
          prompt: "consent",
          access_type: "offline",
          response_type: "code",
        },
      },
    }),
  ],
}

export default NextAuth(authOptions)

我的秘密位于 .env.local 中，还有本地创建的 NEXTAUTH_SECRET 。我面临的问题是，每当用户进入仪表板时，它都会被重定向到登录名，一旦您登录，该页面仍然无法访问，并且不断要求登录。我注意到它useSession返回浏览器中的数据，但显然节点端的令牌或会话为空。我已经Next 13.2.4解决了Next Auth ^4.20.1 ，但我无法弄清楚为什么不起作用，我尝试了其他问题中提出的所有解决方案，但没有一个有效，而且我无法看到仪表板。有什么帮助吗？谢谢