React Native DEbugger 支持 React Native 0.74.0

Question

您好，由于 React Native 0.74.0 中引入了最新的实验性调试器，我们无法再使用 React Native 调试器，并且无法调试网络和 Redux。

有人可以帮助我使用 RN0.74.0 设置 React Native 调试器吗？

Answer 1

我正在使用 React Native 0.74。

1 - 在你的react-native项目中添加flipper redux npm i --save-dev redux-flipper react-native-flipper

2 - 在 oyr 系统中安装 Flipper (https://fbflipper.com/)

3 - 在 Flipper 中安装 redux-debugger 插件（不是在项目中，而是在 Flipper 中），从 > 更多 > 添加插件 > （在我的例子中有效）Flipper 2.0.2 的 Redux 调试器

4 - 启用 redux 调试器（来自 Flipper） redux-debugger 插件将列在禁用的插件部分中。启用插件即可开始。禁用 > Redux 调试器 > 启用插件（也许你可以启动你的项目来执行此步骤，如果是这种情况，请返回到下一步）

5 - 配置您的商店（在我的例子中是 redux 工具包）来自我商店的示例：

import { configureStore, Store } from "@reduxjs/toolkit";
import { IBookState, BookSlice } from "../bookSlice/BookSlice";
import { IUserState, UserSlice} from '../userSlice/UserSlice'

export interface IApplicationState {
  readonly bookState: IBookState;
  readonly userState: IUserState;
}

const middlewares: any[] = [];

if (__DEV__) {
  const createDebugger = require("redux-flipper").default;
  middlewares.push(createDebugger());
}

export const store: Store<IApplicationState> = configureStore({
  reducer: {
    bookState: BookSlice.reducer,
    userState: UserSlice.reducer,
  },
  middleware: (getDefaultMiddleware) => 
    getDefaultMiddleware({
      serializableCheck: false,      
    }).concat(middlewares),
});

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

6 - 在你的 android/gradle.properties 中添加 var Flipper 版本（在你的项目中）

FLIPPER_VERSION =0.212.0（就我而言）

7 - 然后在当前目录中./gradlew clean

8 - 返回根文件夹项目并启动您的应用程序

9 - 接下来你可以查看你的 redux 状态