[react-native] 使用 flipper 调试 redux

以上是效果

一、filpper 默认没有安装flipper插件，所以首先需要安装插件

在商店直接搜索就好

安装完成后可以在Unavailable plugins 发现是不可用的状态.

二、安装react-native-flipper 和 redux

yarn add --dev redux-flipper react-native-flipper

更新pod 依赖

cd ios && pod install

三、修改store设置，添加中间件

我这里使用的@reduxjs/toolkit

// /store/index.ts
import { configureStore } from '@reduxjs/toolkit';
// eslint-disable-next-line import/no-extraneous-dependencies
import * as flipper from 'redux-flipper';
import commonSlice from './modules/common';

// configureStore创建一个redux数据
export default configureStore({
  reducer: {
    common: commonSlice,
  },
  /** 添加中间件 */
  middleware: getDefaultMiddleware => {
    const middlewareTemp = getDefaultMiddleware({
      immutableCheck: false,
    });
    /** 判断开发环境 */
    if (__DEV__) {
      const debugger = flipper.default;

      middlewareTemp.push(debugger());
    }
    return middlewareTemp;
  },
});

在store中使用

import {createStore,applyMiddleware } from 'redux';
// eslint-disable-next-line import/no-extraneous-dependencies
import * as flipper from 'redux-flipper';
import commonSlice from './modules/common';
let middlewareTemp = [];

if (__DEV__) {
      const debugger = flipper.default;
      middlewareTemp.push(debugger());
}

const store = createStore( {
    common: commonSlice,
  },applyMiddleware(...middlewareTemp));

在flipper 插件中启用redux-debugger,就可以调试了

参考文档 javascript.plainenglish.io/how-to-debu…