I am working on the application which is purely redux-saga, but as the application is growing, the number of files is also growing. To solve this issue I am trying to setup redux-starter-kit to my current application.
Here is my store configuration file index.js
import { configureStore, getDefaultMiddleware } from 'redux-starter-kit'
import rootReducer from '../reducers'
export const store = configureStore({
reducer: rootReducer,
middleware: [...getDefaultMiddleware()]
})
old set up for just redux-saga without redux-starter-kit
// import createSagaMiddleware from 'redux-saga'
// import { initSagas } from '../initSagas'
// import rootReducer from '../reducers'
// import { loadState, saveState } from './browserStorage'
// function configureStore () {
// const sagaMiddleware = createSagaMiddleware()
// const persistedState = loadState()
// const createdStore = createStore(
// rootReducer,
// persistedState,
// applyMiddleware(sagaMiddleware)
// )
// initSagas(sagaMiddleware)
// return createdStore
// }
// export const store = configureStore()
// store.subscribe(() => {
// saveState(store.getState())
// })
the problem:
when I set up the redux-starter-kit the old sagas are not working.
Long story short:
How can I set up my existing redux-saga application with redux-starter-kit, without disturbing the current saga files?
Thank you in advance.
redux-starter-kit does not include sagaMiddleware by default [1]. You'll need to add it to the middleware list and initialize the sagas yourself.
In your case I believe this should work:
import createSagaMiddleware from 'redux-saga'
import { configureStore, getDefaultMiddleware } from 'redux-starter-kit'
import rootReducer from '../reducers'
import { initSagas } from '../initSagas'
const sagaMiddleware = createSagaMiddleware();
export const store = configureStore({
reducer: rootReducer,
middleware: [...getDefaultMiddleware(), sagaMiddleware]
})
initSagas(sagaMiddleware);
[1] https://redux-starter-kit.js.org/api/getdefaultmiddleware
Related
I am migrating a vite and react project to Nextjs. This project uses redux-persist.
When migrating and running code it shows this error.
I was trying several solutions found on the net but none helped.
I created a new NextJS project from scratch and ended with the same error.
import { FLUSH, PAUSE, PERSIST, PURGE, REHYDRATE, DEFAULT_VERSION } from './constants';
SyntaxError: Cannot use import statement outside a module
My _app.tsx code
import { persistor, store } from "app/store";
import { Provider } from "react-redux";
function MyApp({ Component, pageProps }: AppProps) {
return (
<Provider store={store}>
<Component {...pageProps} />
</Provider>
);
}
export default MyApp;
app/store.ts
import { configureStore, combineReducers } from "#reduxjs/toolkit";
import {
persistStore,
persistReducer,
FLUSH,
REHYDRATE,
PAUSE,
PERSIST,
PURGE,
REGISTER,
} from "redux-persist";
import storage from "redux-persist/lib/storage";
import logger from "redux-logger";
import rootReducers from "./rootReducers";
const isDev = process.env.NODE_ENV === "development";
const persistConfig = {
key: "root",
version: 1,
storage,
whitelist: ["darkmode"],
};
const rootReducer = combineReducers(rootReducers);
const persistedReducer = persistReducer(persistConfig, rootReducer);
const middlewareLogger: any = !!isDev ? logger : [];
export const store = configureStore({
reducer: persistedReducer,
middleware: (getDefaultMiddleware) =>
getDefaultMiddleware({
serializableCheck: {
ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
},
}).concat(middlewareLogger),
});
export let persistor = persistStore(store);
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;
Someone got it to work with NextJS?
Thanks!
Require cycle: App.tsx -> Store/Reducers/Projects.js -> Store/Actions/Projects.js -> App.tsx
Require cycles are allowed, but can result in uninitialized values. Consider refactoring to remove the need for a cycle.
at node_modules/metro-runtime/src/polyfills/require.js:117:6 in metroRequire
at http://192.168.1.6:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&strict=false&minify=false:177107:24 in <unknown>
at node_modules/metro-runtime/src/polyfills/require.js:349:11 in loadModuleImplementation
at node_modules/redux-thunk/lib/index.js:18:6 in <anonymous>
at node_modules/metro-runtime/src/polyfills/require.js:349:11 in loadModuleImplementation
at http://192.168.1.6:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&strict=false&minify=false:117971:52 in <unknown>
at node_modules/metro-runtime/src/polyfills/require.js:349:11 in loadModuleImplementation
at node_modules/expo/AppEntry.js:3:0 in <global>
- ... 4 more stack frames from framework internals
I think My problem is with the way, I am initialising and exporting firestore and firebase realtime database.
when my app starts it reaches App.tsx and from their it goes to Store/Reducers/Projects.js to initialise and fetch the redux-store from their it goes to Store/Actions/Projects.js to dispatch the actions.
now the problem here is in Store/Actions/Projects.js it imports firestore and realtime database from App.tsx. Because of this I think it's causing Cycle. Am i correct? can any one please help me out and refactor it so that the cycle brakes.
here In App.tsx I first initiate firebase, firestore and realtime database.
const app = initializeApp(firebaseConfig);
export const db = getFirestore(app);
export const RealtimeDB = getDatabase(app);
and in Store/Actions/Projects.js I am importing it as
import { db, RealtimeDB } from "../../App";
I assume the problem is in the way I initialise firebase and export it. And I also think there is a problem with import statements. Whole code is provided below.
my App.tsx code
import { useEffect, useState } from "react";
import { StatusBar } from "expo-status-bar";
import { SafeAreaProvider } from "react-native-safe-area-context";
//import { useColorScheme } from "react-native-appearance";
import useCachedResources from "./hooks/useCachedResources";
import useColorScheme from "./hooks/useColorScheme";
import Navigation from "./navigation";
import { ThemeProvider } from "react-native-elements";
// redux imports
import { createStore, combineReducers, applyMiddleware } from "redux";
import { Provider } from "react-redux";
import ReduxThunk from "redux-thunk";
import Allprojects from "./Store/Reducers/Projects";
//firebase config
**import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";
import { getDatabase } from "firebase/database";
import { getAuth, onAuthStateChanged } from "firebase/auth";
import AuthScreen from "./screens/AuthenticatonScreens/AuthScreen";**
const firebaseConfig = {****};
**const app = initializeApp(firebaseConfig);
export const db = getFirestore(app);
export const RealtimeDB = getDatabase(app);**
const RootReducers = combineReducers({
Projects: Allprojects,
});
const store = createStore(RootReducers, applyMiddleware(ReduxThunk));
export default function App() {
const [isSigned, setisSigned] = useState(false);
const [isLoding, setisLoding] = useState(false);
const isLoadingComplete = useCachedResources();
const colorScheme = useColorScheme();
const auth = getAuth();
useEffect(() => {
onAuthStateChanged(auth, (user) => {
if (user) {
const uid = user.uid;
setisSigned(true);
} else {
setisSigned(false);
}
});
});
if (!isLoadingComplete) {
return null;
} else {
return (
<Provider store={store}>
<SafeAreaProvider>
<ThemeProvider useDark={colorScheme === "dark"}>
{isSigned == false ? (
<AuthScreen />
) : (
<Navigation colorScheme={colorScheme} />
)}
<StatusBar />
</ThemeProvider>
</SafeAreaProvider>
</Provider>
);
}
}
my Store/Reducers/Projects.js file
import {
RETRIVING_PROJECT,
RETRIVING_PROJECT_TASKS,
} from "../Actions/Projects";
const initialstate = {
ProjectsInvoledIn: [],
ProjectTasks: [],
};
export default (state = initialstate, action) => {
switch (action.type) {
case RETRIVING_PROJECT:
return {
...state,
ProjectsInvoledIn: action.payload,
};
case RETRIVING_PROJECT_TASKS:
return { ...state, ProjectTasks: action.payload };
}
return state;
};
my Store/Actions/Projects.js file
export const RETRIVING_PROJECT = "RETRIVING_PROJECT";
import { db, RealtimeDB } from "../../App";
import {
writeBatch,
doc,
onSnapshot,
query,
orderBy,
serverTimestamp,
addDoc,
collection,
} from "firebase/firestore";
import {
ref,
set,
onValue,
push,
serverTimestamp as DbSer,
} from "firebase/database";
import { UserIds } from "../../UserIds";
import { getAuth } from "firebase/auth";
import { nanoid } from "nanoid/non-secure";
// CREATING PROJECTS
export const CreateProject = () => { ....my writing and fetching data functions... }
You can put those firebase related functions in different file, then import from that file instead of app.js.
I was working with redux-saga but I'm with a problem: the redux-auth-wrapper needs the redux-thunk to do the redirects, so I simply added the thunk in my store:
import {createStore, compose, applyMiddleware} from 'redux';
import createLogger from 'redux-logger';
import {routerMiddleware} from 'react-router-redux';
import {browserHistory} from 'react-router';
import thunk from 'redux-thunk';
import createSagaMiddleware, {END} from 'redux-saga';
import sagas from '../sagas';
import reduxImmutableStateInvariant from 'redux-immutable-state-invariant';
import rootReducer from '../reducers';
import _ from 'lodash';
import {loadState, saveState} from '../connectivity/localStorage';
const persistedState = loadState();
const routerMw = routerMiddleware(browserHistory);
const loggerMiddleware = createLogger();
const sagaMiddleware = createSagaMiddleware();
function configureStoreProd() {
const middlewares = [
// Add other middleware on this line...
routerMw,
sagaMiddleware,
thunk
];
const store = createStore(rootReducer, persistedState, compose(
applyMiddleware(...middlewares)
)
);
store.subscribe(_.throttle(() => {
saveState({
auth: store.getState().auth
});
}, 1000));
sagaMiddleware.run(sagas);
store.close = () => store.dispatch(END);
return store;
}
function configureStoreDev() {
const middlewares = [
// Add other middleware on this line...
// Redux middleware that spits an error on you when you try to mutate your state either inside a dispatch or between dispatches.
reduxImmutableStateInvariant(),
routerMw,
sagaMiddleware,
loggerMiddleware,
thunk
];
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; // add support for Redux dev tools
const store = createStore(rootReducer, persistedState, composeEnhancers(
applyMiddleware(...middlewares)
)
);
store.subscribe(_.throttle(() => {
saveState({
auth: store.getState().auth
});
}, 1000));
if (module.hot) {
// Enable Webpack hot module replacement for reducers
module.hot.accept('../reducers', () => {
const nextReducer = require('../reducers').default; // eslint-disable-line global-require
store.replaceReducer(nextReducer);
});
}
sagaMiddleware.run(sagas);
store.close = () => store.dispatch(END);
return store;
}
const configureStore = process.env.NODE_ENV === 'production' ? configureStoreProd : configureStoreDev;
export default configureStore;
This way works nice without errors, but I'm new in react and I don't know if have problem with redux-saga and redux-thunk working together...
Someone can help me?
No problems to have both. Sagas are just background checkers who react to some actions while thunk let's you have more interesting action creators.
While thunk will act more like synced code, sagas will do it's job in a background.
Both extensions do not change how actions are flying around. Actions still, in the end, are just bare objects like w/o thunk or w/o sagas.
Yes, of course you can use both redux-saga and redux-thunk in this way,
import { createStore, applyMiddleware } from 'redux'
import createSagaMiddleware from 'redux-saga'
import thunk from 'redux-thunk'
import logger from 'redux-logger'
import rootSagas from './sagas'
import rootReducer from './reducers'
const saga = createSagaMiddleware()
const middleWares = [saga, thunk]
export const store = createStore(
rootReducer,
applyMiddleware(...middleWares)
)
saga.run(rootSagas)
It seems there is an issue using the encrypt option of redux-persist in react-native:
https://github.com/maxdeviant/redux-persist-transform-encrypt/issues/15
Can anyone help with any solution/workaround to use redux persist to encrypt and store a login token in react-native?
When I try to use the redux persist with the redux-persist-transform-encrypt i get
Redux-persist-transform-encrypt: expected outbound state to be a string error
import { createStore, compose, applyMiddleware } from 'redux';
import ReduxThunk from 'redux-thunk';
import { persistStore, autoRehydrate } from 'redux-persist';
import { AsyncStorage } from 'react-native';
import createEncryptor from 'redux-persist-transform-encrypt';
import reducers from './reducers';
const store = createStore(
reducers,
{},
compose(
applyMiddleware(ReduxThunk),
autoRehydrate(),
),
);
const encryptor = createEncryptor({
secretKey: 'my-super-secret-key-999',
});
persistStore(
store,
{
storage: AsyncStorage,
whitelist: ['auth'],
transforms: [encryptor],
},
);
export default store;
My auth state is something like this:
const INITIAL_STATE = {
user: null,
token: ''
};
Is there any solution to use redux-persist-transform encrypt or the transform and other package to encrypt the token when using redux persist?
I found a solution using the customTransform instead of redux-persist-transform-encrypt:
import { createStore, compose, applyMiddleware } from 'redux';
import ReduxThunk from 'redux-thunk';
import { persistStore, createTransform, autoRehydrate } from 'redux-persist';
import { AsyncStorage } from 'react-native';
import CryptoJS from 'crypto-js';
import reducers from './reducers';
const store = createStore(
reducers,
{},
compose(
applyMiddleware(ReduxThunk),
autoRehydrate(),
),
);
const encrypt = createTransform(
(inboundState, key) => {
if (!inboundState) return inboundState;
const cryptedText = CryptoJS.AES.encrypt(JSON.stringify(inboundState), 'secret key 123');
return cryptedText.toString();
},
(outboundState, key) => {
if (!outboundState) return outboundState;
const bytes = CryptoJS.AES.decrypt(outboundState, 'secret key 123');
const decrypted = bytes.toString(CryptoJS.enc.Utf8);
return JSON.parse(decrypted);
},
);
persistStore(
store,
{
storage: AsyncStorage,
whitelist: ['auth'], // <-- keys from state that should be persisted
transforms: [encrypt],
},
);
export default store;
When using redux-persist initial state is triggered before rehydrating is finished so I had to apply this too:
https://github.com/rt2zz/redux-persist/blob/master/docs/recipes.md#delay-render-until-rehydration-complete
This worked for me:
import { createStore } from 'redux';
import { persistStore, persistReducer } from 'redux-persist';
import createEncryptor from 'redux-persist-transform-encrypt';
import storage from 'redux-persist/lib/storage';
import rootReducer from '/path/to/your/rootReducer';
const encryptor = createEncryptor({
secretKey: 'omg-this-is-some-secret-stuff',
});
const persistConfig = {
key: 'root',
storage,
transforms: [encryptor],
};
const reducer = persistReducer(persistConfig, rootReducer);
export const store = createStore(reducer);
export const persistor = persistStore(store);
This is working fine and store data in session storage.
Use below to encript redux data.
1) install redux-persist-transform-encrypt module
yarn add redux-persist-transform-encrypt
npm install redux-persist-transform-encrypt --save
2) import redux files.
import { createStore } from 'redux';
import { persistStore, persistReducer } from 'redux-persist';
import createEncryptor from 'redux-persist-transform-encrypt';
import storageSession from 'redux-persist/lib/storage/session';// store data in session storage
// import storage from 'redux-persist/lib/storage'; // store data in local storage
import promise from 'redux-promise';
import rootReducer from './path/reducers/';
const encryptor = createEncryptor({
secretKey: 'test#key12',
});
const persistConfig = {
key: 'root',
storage:storageSession,
// storage:storage,
transforms: [encryptor],
}
const persistedReducer = persistReducer(persistConfig, rootReducer)
export default () => {
let store = createStore(persistedReducer)
let persistor = persistStore(store)
return { store, persistor }
}
I've got a problem with my reducer. I have created an action creator, reducer, and used 'react-redux' connect to combine both.
When I'm fireing my action, action creator logs, that he just received a new data, but reducer does not log anything (Reducer logs only 3 initial loops). Also, store.getState() which I'm display in console every 5 seconds shows null (which is initial state of my store). Could you help me to deal with the problem?
export const UPDATE_PACKAGE_JSON = 'UPDATE_PACKAGE_JSON';
export function setName(name){
console.log('Action creator just received a name', name);
return {
type: UPDATE_PACKAGE_JSON,
payload: name
}
}
Container
const mapDispatchToProps = (dispatch) =>
bindActionCreators({ setName }, dispatch);
export default connect(null, mapDispatchToProps)(ConfigurationForm) ;
Reducer
import { UPDATE_PACKAGE_JSON } from './../actions/index';
export const packageJson = function (state = null, action){
console.log(UPDATE_PACKAGE_JSON);
switch(action.type){
case UPDATE_PACKAGE_JSON:
return {...state,
name: action.payload};
}
return state;
};
EDIT
Store
import { createStore } from 'redux';
import rootReducer from './../reducers/rootReducer';
const store = createStore(rootReducer);
export default store;
rootReducer
import { combineReducers } from 'redux';
import { packageJson } from './packageJson';
const rootReducer = combineReducers({
packageJson
});
export default rootReducer;