Блог

Главная - Вопросы по программированию - Плагин Redux Debugger в Flipper недоступен

Плагин Redux Debugger в Flipper недоступен

react-native #redux #redux-toolkit #redux-devtools #flipper

#react-native #redux #redux-toolkit #redux-devtools #flipper

Вопрос:

Я использую React Native версии 0.65.1 (React Native CLI) и настольное приложение Flipper версии 0.114.1 в ОС Windows 10. В моем приложении React Native я использую Redux toolkit. Насколько я мог судить, RN выше версии 0.62 должен поддерживать Flipper из коробки, а Redux toolkit не запрашивает дополнительную конфигурацию промежуточного программного обеспечения для flipper.

Я попытался установить пакет npm flipper-plugin-redux-debugger и ничего, Redux Debugger в Flipper по-прежнему недоступен.

В чем моя проблема?

Рабочий стол Flipper

Хранилище инструментов Redux

Комментарии:

1. Вы выполнили эти шаги?: github.com/jk-gan/flipper-plugin-redux-debugger#get-started

2. @ridvanaltun да, и, как говорится в документации, «Начиная с React Native 0.62, после создания вашего проекта с помощью react-native init интеграция Flipper готова из коробки для отладочных сборок», поэтому дополнительная настройка не требуется…

3. В документации говорится, что если вы используете RN 0.62 , вам не нужно устанавливать Flipper в свой проект промежуточное ПО redux.

4. @ridvanaltun да, мой плохой, может быть, вы можете подсказать мне, как добавить его в мой магазин инструментов redux?

5. Извините, я не использовал инструментарий redux, поэтому я не знаю. Я думаю, что конфигурация очень похожа на обычную Redux, нужно прочитать официальную документацию или посмотреть несколько руководств.

Ответ №1:

@Tymoxx ответ правильный, я просто хочу подчеркнуть, что не включайте отладчик в производственном приложении. Изменение этого поможет

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


const configureCustomStore = () => {


const rootReducer = combineReducers({});


const store = configureStore({
    reducer: rootReducer,
    middleware: (getDefaultMiddleware) => __DEV__ ? 
    getDefaultMiddleware({ serializableCheck: false}).concat(createDebugger()) : 
    getDefaultMiddleware({
      serializableCheck: false}),
   });

 return {store};
 };

export const {store} = configureCustomStore();

Комментарии:

1. Спасибо вам обоим, это очень помогает!

Ответ №2:

Вот как вы добавляете Flipper, если используете Redux Toolkit:

 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();

Обратите внимание, если вы используете пользовательский клиент разработки от Expo, вам нужно будет перестроить приложение.

Метки: