Flipper 中的 Redux Debugger 插件不可用

Posted 2023-02-19

【中文标题】Flipper 中的 Redux Debugger 插件不可用

【英文标题】：Redux Debugger plugin in Flipper is unavailable

【发布时间】：2021-11-30 22:22:37

【问题描述】：

我在 Windows 10 操作系统上使用 React Native v0.65.1 (React Native CLI) 和 Flipper 桌面应用 v0.114.1。在我的 React Native 应用程序中，我使用的是 Redux 工具包。尽我所能探索 v0.62 以上的 RN 应该支持开箱即用的 Flipper，而且 Redux 工具包不要求对 Flipper 进行额外的中间件配置。

我尝试安装 Flipper-plugin-redux-debugger 的 npm 包，什么也没有，Flipper 中的 Redux Debugger 仍然不可用。

我的问题在哪里？

【问题讨论】：

您是否按照这些步骤操作？：github.com/jk-gan/flipper-plugin-redux-debugger#get-started

@ridvanaltun 是的，正如文档所说“从 React Native 0.62 开始，在使用 react-native init 生成项目后，Flipper 集成已准备好用于调试构建”，因此无需额外需要配置...

文档说如果你使用 RN 0.62+，你不必在项目中安装Flipper，而不是 redux 中间件。

@ridvanaltun 是的，我的错，你能建议我如何在我的 redux 工具包商店中添加它吗？

对不起，我没有使用redux工具包所以我不知道。我觉得配置和普通的 Redux 很像，需要看官方文档或者看一些教程。

【参考方案1】：

如果您使用的是Redux Toolkit，这就是添加 Flipper 的方式：

const createDebugger = require('redux-flipper').default; // <-- ADD THIS


const configureCustomStore = () => 
    const rootReducer = combineReducers(
        // ... YOUR REDUCERS
    );


    const store = configureStore(
        reducer: rootReducer,
        middleware: (getDefaultMiddleware) =>
            getDefaultMiddleware()
                .concat(createDebugger()), // <-- ADD THIS
    );

    return store;
;

export const store = configureCustomStore();

注意，如果您使用的是Custom Development Client from Expo，则需要重新构建应用程序。