Как внедрить Redux DevTools в мой собственный проект? ⇐ Android

[Anonymous]

Я использую configureStore для создания своего магазина, я пытаюсь добавить доступ к расширению Redux DevTools (в сочетании с отладчиком React Native), но найденная мной документация объясняет, как это сделать только с помощью createStore, а не configureStore. Кажется, я что-то не так понял...
Это мой файл store.js:

Код: Выделить всё

import { configureStore } from '@reduxjs/toolkit'

import { combineReducers } from 'redux'
import { persistStore, persistReducer } from 'redux-persist'
import axiosMiddleware from 'redux-axios-middleware'
import axios from 'axios'
import AsyncStorage from '@react-native-async-storage/async-storage'
import autoMergeLevel2 from 'redux-persist/lib/stateReconciler/autoMergeLevel2'
import { startLoading, stopLoading, showError } from '@/redux/app/action'

import appReducer from  '@/redux/app/reducer'
import userReducer from '@/redux/user/reducer'
import gameReducer from '@/redux/games/reducer'
import shopReducer from '@/redux/shop/reducer'

import { BASE_API_URL } from '@/config/constants'
import logger from 'redux-logger'
import { setAuthToken } from '@/redux/user/action'

const client = axios.create({
baseURL: BASE_API_URL,
responseType: 'json',
headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
timeout: 3000
})

client.interceptors.request.use(request => {
console.log('Starting Request', JSON.stringify(request, null, 2))
return request
})

const middlewareConfig = {
returnRejectedPromiseOnError: true,
interceptors: {
request: [
{
success: async function ({ getState, dispatch }, req) {
const userState = getState().user;
if (userState && userState.tokens) {
const tokens = userState.tokens;
req.headers['access-token'] = tokens['access-token'];
req.headers.client = tokens.client;
req.headers.uid = tokens.uid;
console.log('Request with token', tokens)
}
dispatch(startLoading());
return req;
},
error: function ({ dispatch }, error) {
dispatch(showError('Error requesting information.'));
return error;
}
}
],
response: [
{
success: async function ({ dispatch }, res) {
const tokens = {
'access-token': res.headers['access-token'],
client: res.headers.client,
uid: res.headers.uid
}
//console.log('Stored state', getStoredState(persistConfig))
if (tokens['access-token']){
dispatch(setAuthToken(tokens))
}
dispatch(stopLoading())
return Promise.resolve(res)
},
error: async function ({ dispatch }, error) {
if (error.response) {
if (error.response.status === 404) {
dispatch(showError('Error 404'))
} else {
dispatch(showError('Another error.'))
console.log(error.response)
}
} else {
// network error
dispatch(showError('Network error.'))
error = { response: { data: { message: error.message } } }
}

dispatch(stopLoading())
return Promise.reject(error)
}
}
]
}
}

const persistConfig = {
key: 'root',
storage: AsyncStorage,
stateReconciler: autoMergeLevel2,
blacklist: ['app']
}

const reducers = combineReducers({
user: userReducer,
app: appReducer,
game: gameReducer,
shop: shopReducer
})

const persistedReducer = persistReducer(persistConfig, reducers)

const store = configureStore({reducer: persistedReducer, middleware: [logger, axiosMiddleware(client, middlewareConfig)]})
const persistor = persistStore(store)

export { store, persistor }

Я попробовал несколько разных вариантов, например добавил:
devTools:process.env.NODE_ENV !== 'production' в configureStore

Подробнее здесь: https://stackoverflow.com/questions/790 ... ve-project