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
Related
I use the Notistack library and forked it and then using VSCode to try to add a Redux store in the library that I want to expose to Apps.
I'm not so good with Typescript. I have some trouble hehe.
What I want to do is that when the app is using Notistack to show a snack message. I want to use Redux to update the message in real time, like a file up/download progress showing on the snack. It's here Notistack new Redux store(that i create here) come into play. I want Notistack to expose the Redux store to the app so the app can send redux dispatch into to Notistack Redux Store. and showing dispatched message in the Notistack SnackbarItem.tsx
(hope you understand)
When I compile in VSCode I get this error in my app:
Failed to compile.
./src/redux/root-reducer.js
Attempted import error: 'notistack' does not contain a default export (imported as 'NotisReducer').
My root-reducer in the App look like this:
import { combineReducers } from 'redux';
import NotisReducer from 'notistack';
import snackReducer from './snackbar/snack.reducer';
const rootReducer = combineReducers({
snack: snackReducer,
NotisReducer,
});
export default rootReducer;
As you see I import Notistack's NotisReducer and I think I have implemented that.
(I have used NPM link to add locally forked Notistack library into my app)
Now it looks like this here is Notistack's indext.js file where I expose Redux store as NotisReducer:
What I did in Notistack was I added a to index.d.ts:
I define the type store like this:
import * as React from 'react';
import { SnackbarClassKey } from '#material-ui/core/Snackbar';
import { ClickAwayListenerProps } from '#material-ui/core/ClickAwayListener';
import { TransitionProps } from '#material-ui/core/transitions/transition';
import { StandardProps } from '#material-ui/core';
import store from './Redux/store'; // MY STORE
...
...
export type store = store; // EXPORT IT
I'm not sure if this is correct as I could not set breakpoint in npm linked Notistack. Maybe it's to many problem now that must be fixed first.
In the file
SnackbarProvider.tsx
I did like this, importing the store type from index.d.ts):
import {
SnackbarProviderProps,
SnackbarKey,
SnackbarMessage,
OptionsObject,
RequiredBy,
ProviderContext,
TransitionHandlerProps,
store, // STORE
} from ".";
import createChainedFunction from "./utils/createChainedFunction";
export { store }; // EXPOSING IT
In the file
NotisReducer.js
I import the store to be sent to indext.js above
But as you saw above I get compiler error store is not exported.
Attempted import error: 'notistack' does not contain a default ex (imported as 'NotisReducer').
please advice :))
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.
I'm using a Rails-style organization for a React/Redux project but I'm having an import issue that I can't figure out.
I have a constants directory with a module index (index.js) that looks like this:
import * as types from './ActionTypes';
export default types;
(All my action creators are in ./ActionTypes.)
I then have an actions/index.js file where I import all the constants I need for my actions (I've included just one of the action creators for brevity):
import * as c from './../constants';
...
export const toggleForm = () => ({
type: c.TOGGLE_FORM
});
I've thoroughly tested all reducers and action creators - and all tests pass without import issues.
However, in my React app, which was working before I refactored to use action creators, I get the following issue and my project won't compile: Attempted import error: 'TOGGLE_FORM' is not exported from './../constants' (imported as 'c').
If I specify that constants should be imported into actions/index.js with import * as c from './../constants/ActionTypes.js'; (bypassing my constant's directory's module index) - the React application compiles correctly but the tests for my action creators breaks.
What am I missing here?
Delete
import * as types from './ActionTypes';
export default types;
and instead export all your actions as const like so
// user authentication actions
export const SET_USER = 'SET_USER'
export const CLEAR_USER = 'CLEAR_USER'
export const VERIFY_USER = 'VERIFY_USER'
it should work now
I am developing my project using React and Redux. I am getting below error when I run my project after few days later. Could anyone say why I am getting below error.
This is how I configure redux store:
const enhander = compose(applyMiddleware(...featureMiddleware, ...coreMiddleware, logger, thunk));
export const store = createStore(rootReducer, {}, enhander);
The only difference is I provide an initial state which is an empty object
Greetings.
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