Redux devtools and React Native - reactjs

I am working on a React Native app, but for some reasons I have the redux devtools not able to detect the store.
Here is the code for store.js
import { createStore, applyMiddleware, compose } from 'redux';
import createSagaMiddleware from 'redux-saga';
import jobs from './reducers/jobs';
import { watcherSaga } from './sagas';
// Saga Middleware
const sagaMiddleware = createSagaMiddleware();
const composeEnhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
let store = createStore(jobs, composeEnhancer(applyMiddleware(sagaMiddleware)));
sagaMiddleware.run(watcherSaga);
// Enable Hot Module for the reducers
/* eslint-disable global-require */
if (module.hot) {
// module.hot.accept('./reducers/index', () => {
// store.replaceReducers(require('./reducers').default);
// });
}
export default store;
When I open the chrome debugger-ui I get "No store found" in the redux tab.
I already gave access to files url from the extension settings. I have no idea what can be the problem. I tried several store settings with middleware and redux-tools, found on tutorial, but none of them seems to work. I tried also the standalone app but it does not detect anything, neither the react code.
What am I doing wrong?

I found the solution and I share it so will help others.
The main problem is that I am using expo, so expo runs on a different port than the normal devtools.
Instead of using chrome I downloaded the standalone debugger and then, thanks to this article, I opened the debugger with the correct port, this did the magic:
rndebugger://set-debugger-loc?host=localhost&port=19001

Related

Way to keep login state using JWT after logged in

I'm wondeirng is there a original, and most used way to code "Way to keep logged in state".
Currently, I set log in button to 'MyPage' button after successful logged in.
However, i referesh the web, then this state has gone.
Ah, i'm using React, and using Cookies with Access and Refresh Token, and wondering "Should i use another state to keep logged in information or not."
Before, i used localStorage and set the state manually, such as "isLogin" : "true" state in localStorage.
However, i'm wondering the way to use accessToken which expires automatically in 30 mins.
Will there ve a neat way to construct this function?
Thanks !
Do you want to log in again after the relaunch of the browser?
If so, it can be done with Redux store.
Here is the link for documentation.
https://redux.js.org/api/store
If not, it should be done with session or chrome.storage or something.
You can use redux-persist in your application so that state is maintained even if you are refreshing page after logged in application.
Sample redux store configuration:
import { combineReducers} from 'redux';
import { configureStore } from '#reduxjs/toolkit';
import thunk from 'redux-thunk';
import { persistReducer } from 'redux-persist';
import storage from '#/redux/sync_storage';
import { setupListeners } from '#reduxjs/toolkit/dist/query';
import persistStore from 'redux-persist/lib/persistStore';
import app from '#/redux/slice/appSlice';
const persistConfig = {
key: 'root',
storage,
//blacklist: ['app']
}
const rootReducer = combineReducers({
app,
})
const initialState = {}
const persistedReducer = persistReducer(persistConfig, rootReducer)
const store= configureStore({reducer:persistedReducer,initialState,devTools: process.env.NODE_ENV !== 'production',middleware:[thunk]})
setupListeners(store.dispatch);
export const persistor = persistStore(store, {}, () => {
persistor.persist();
});
export default store;
The below urls will help with the configuration for react application
https://www.npmjs.com/package/#reduxjs/toolkit
https://www.npmjs.com/package/redux-persist
https://kandi.openweaver.com/javascript/rt2zz/redux-persist#Code-Snippets

Resolve a React Native/Web Common import problem

Merry Chrismas...
I got a React project structured like below
- My project
|- common (redux and redux-persist installed)
|- mobile (... with react-native init)
|- web (... with create react app)
I tried then to import a basic redux from common in mobile and got an error
Here's the code
import default_storage from "redux-persist/lib/storage"
import default_storage from "redux-persist/lib/storage";
import thunk from "redux-thunk";
...
export default (storage = default_storage) => {
const store = createStore(
combineReducers({
auth: persistReducer(
{ key: "auth", storage},
authReducer
),
event: eventReducer,
}),
applyMiddleware(thunk)
);
return store
};
...
When I try to call the function in mobile passing AsyncStorage as parameter
I got an error saying the function couldn't compile because of the fact that there's no part of common that can compile the native part of AsyncStorage.
I tried first with adding fields resolve in babel.config.js but it actually doesn't work
If someone already did this kinda Structure before, would you share ya code please. Just how to structure the code
Thanks guys

React with Redux app only works if redux tools installed

I have built an app with react and redux. I build the app in the standard way.
npm run build --prod
The app is then deployed to firebase hosting. I found that the app will not load in Chrome, Firefox, or Safari unless the redux web dev tools are installed. Why is this and how can I stop it?
The app is at ... https://triviatime-e7aa2.web.app/
Configure redux dev tools with redux-devtools-extension npm package.
import { composeWithDevTools } from "redux-devtools-extension";
export const store = createStore(
rootReducer,
composeWithDevTools(applyMiddleware(...middleware))
);
See section 1.3 in following link for more information.
https://github.com/zalmoxisus/redux-devtools-extension#12-advanced-store-setup
Another option
import { createStore, applyMiddleware, compose } from 'redux';
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(reducer, /* preloadedState, */ composeEnhancers(
applyMiddleware(...middleware)
));

When using React Native Debugger, "Expected the reducer to be a function" happens

I was following a React Native tutorial.
I was trying to connect it to React Native Debugger app.
But then I got "Expected the reducer to be a function" error.
It says here that it is caused by {} around the module I'm importing.,
Expected the reducer to be a function
So I did fix it by removing {}
Basically, it works when import composeWithDevTools and it errors when import {composeWithDevTools} when connected to React Native Debugger.
But I cannot understand why!
The tutorial I'm following works totally fine with import {composeWithDevTools} when connected to React Native Debugger.
It works fine when NOT connected to React Native Debugger.
Is this an error on React Native Debugger? Why does this happen?
Edit: I re-started metro many times. It always produces the same result.
import { createStore, combineReducers } from 'redux';
import userReducer from './reducers/user';
import composeWithDevTools from 'redux-devtools-extension';
const rootReducer = combineReducers({
user: userReducer,
});
const store = createStore(rootReducer, composeWithDevTools);
export default store;
Turns out the error came from a different place than what the debugger pointed to.
Problem is here. const store = createStore(rootReducer, composeWithDevTools);
This should be
const store = createStore(rootReducer, composeWithDevTools());
with () added at the last argument.
It's good to follow documentation
You need the curly bracket. If it's behaviour is weird, or you have just installed a new package, maybe it's a good habit to restart the metro.

How to run Redux DevTools Extension INSIDE Chrome Extension running React?

The big issue i'm facing is I'm seeing the error "No store found" when trying to access my redux store in the Redux DevTools Extension WHILE my React app is running inside a Chrome Extension.
I've seen a few questions on SO about similar errors, like:
“No store found” when using Redux chrome extension"
"How to add Redux DevTools Extension to my react-redux store?"
Most of the answers to these questions relate to specifying the correct variables like using window.__REDUX_DEVTOOLS_EXTENSION__ instead of devToolsExtension (after the extension was upgraded), or installing the npm package redux-devtools-extension.
My problem is different - if I run my a React app (in development mode), outside of the Chrome Extension (a.k.a. not through the Chrome Extension's options page), I find that the Redux DevTools Extension works fine for me. However, as I mentioned before, when I run the React app from within the Chrome Extension options page, the Redux DevTools Extension cannot find the store.
Here is my index.js file that I use inside the options page:
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware, compose, combineReducers } from 'redux';
import thunk from 'redux-thunk';
import App from './App';
import rootReducer from './store/reducers/root';
//
const composeEnhancers = process.env.NODE_ENV === 'development'
? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
: null
|| compose;
const store = createStore(rootReducer, composeEnhancers(
applyMiddleware(thunk)
));
const app = (
<Provider store={store}>
<App />
</Provider>
);
ReactDOM.render(app, document.getElementById('root'));
I believe the error has to do with the fact that that I'm running the React App from within the options page of my Chrome Extension. I've found that window.__REDUX_DEVTOOLS_EXTENSION__ is undefined from the Chrome Extension options page, but that window.__REDUX_DEVTOOLS_EXTENSION__ variable is visible and accessible on normal pages. Is there any tried and tested way of making window.__REDUX_DEVTOOLS_EXTENSION__ available in the options page of a Chrome Extension?
You can use Remote Redux Devtools in this case.
Add this to your store creation (yarn add --dev remote-redux-devtools):
import devToolsEnhancer from "remote-redux-devtools";
const store = createStore(
popupReducer,
devToolsEnhancer({
hostname: "localhost",
port: 8000,
realtime: true
})
);
You will also need a remotedev server, I went with a local one:
yarn add --dev remotedev-server
cd /node_modules/.bin/
remotedev --port=8000
Now you can connect and monitor your store using the chrome extension, click the Remote button, go to settings and click "Use custom (local) server" there and you should see your store in realtime.

Resources