WARNING in ./node_modules/#redux-saga/core/dist/redux-saga-core.esm.js 1343:21-28
"export 'compose' was not found in 'redux'
# ./node_modules/redux-saga/dist/redux-saga-core-npm-proxy.esm.js
# ./src/store.js
# ./src/App.js
# ./src/index.js
WARNING in ./src/store.js 6:21-32
"export 'createStore' was not found in 'redux'
# ./src/App.js
# ./src/index.js
I'm facing the problem of creating a redux store. Here, I've added the sample code. If I remove the provider from App.js, it's working fine. Can anyone please help me to resolve this issue?
App.js
import React from 'react';
import Layout from './components/Layout';
import { BrowserRouter } from 'react-router-dom';
import { Provider } from 'react-redux';
import { store } from './store'
const App = () => {
return (
<Provider store={store}>
<BrowserRouter>
<Layout/>
</BrowserRouter>
</Provider>
);
}
export default App;
store.js
import { createStore, applyMiddleware } from 'redux'
import createSagaMiddleware from 'redux-saga'
import reducers from './redux';
import sagas from './sagas';
const sagaMiddleware = createSagaMiddleware()
export const store = createStore(
reducers,
applyMiddleware(sagaMiddleware)
)
sagaMiddleware.run(sagas)
reducer
import { combineReducers } from 'redux';
import { reducer as auth } from './AuthRedux'
const reducers = combineReducers({
auth
});
export default reducers;
sagas
import { takeLatest, all } from 'redux-saga/effects';
import api from '../middleware/api';
import { AuthTypes } from '../redux/AuthRedux'
import { signupSaga } from './AuthSaga'
export default function * root () {
const sagaIndex = [
yield takeLatest(AuthTypes.SIGNUP, signupSaga, api),
];
yield all(sagaIndex)
}
I guess it has something to do with the redux and how I import stuff, but I'm not sure what's wrong there.😩😩
Thanks
In the store.js replace
export const store = createStore(
reducers,
applyMiddleware(sagaMiddleware)
)
with
export const store = createStore(
reducers,
{},
applyMiddleware(sagaMiddleware)
)
Just an arrow in the dark coz it worked for me maybe it should work for you
Related
I'm using react-native with redux-saga but this error happens when emulator acting
error: attempt to invoke virtual method on a null object reference
i think this code is problem
(App.js)
import React from 'react';
import Store from './store/configureStore'
import {Provider} from 'react-redux';
import {App} from './src/index';
const Root = () => {
return (
<Provider store={Store()}>
<App />
</Provider>
);
};
export default Root;
(configure/configure.js)
import { applyMiddleware, createStore, compose } from 'redux';
import createSagaMiddleware from 'redux-saga';
import { composeWithDevTools } from 'redux-devtools-extension';
import reducer from '../reducers';
import rootSaga from '../sagas';
const Store = () => {
const sagaMiddleware = createSagaMiddleware();
const middlewares = [sagaMiddleware];
const enhancer = process.env.NODE_ENV === 'production'
? compose(applyMiddleware(...middlewares))
: composeWithDevTools(
applyMiddleware(...middlewares),
);
const store = createStore(reducer, enhancer);
store.sagaTask = sagaMiddleware.run(rootSaga);
return store;
};
export default Store;
i think error occure is beacuse redux-saga stroe.. how can i fix my code?
React router works normal. But if I add <Redirect> or call from <Link>, I have this exception:
Uncaught Could not find router reducer in state tree, it must be mounted under "router"
rootReducer.js:
import { combineReducers } from 'redux';
import { connectRouter } from 'connected-react-router';
import counterReducer from './Counter/counter.reducer';
import sidebarReducer from './Sidebar/sidebar.reducer';
export default (history) => combineReducers({
router: connectRouter(history),
counter: counterReducer,
sidebar: sidebarReducer,
});
store.js:
import { createBrowserHistory } from 'history';
import { applyMiddleware, compose, createStore } from 'redux';
import { routerMiddleware } from 'connected-react-router';
import createRootReducer from './rootReducer';
export const history = createBrowserHistory();
export default function configureStore(preloadedState) {
const composeEnhancer = compose
const store = createStore(
createRootReducer(history),
preloadedState,
composeEnhancer(
applyMiddleware(
routerMiddleware(history),
),
),
);
if (module.hot) {
module.hot.accept('./rootReducer', () => {
store.replaceReducer(createRootReducer(history));
});
}
console.log(store.getState());
return store;
}
Check the history documentation. If you're using react-router-dom#5.x.x then you should use history#4.10.1 because the latest version of history (v5) only works with react-router-dom#6.x.x
I'm trying to build react app with typescript using redux for state management but I'm getting this error on the app component.
-app.tsx
import React from 'react';
import { Provider } from 'react-redux';
//import { Router } from "react-router";
import store from './redux/store';
import './App.css';
function App() {
return (
<Provider store={store}>
</Provider>
);
}
export default App;
-Store.tsx
import { createStore, applyMiddleware, compose } from 'redux';
import { createLogger } from 'redux-logger';
import thunk from 'redux-thunk';
import rootReducer from './reducers';
const loggerMiddleware = createLogger()
// For redux DevTool
declare global {
interface Window {
__REDUX_DEVTOOLS_EXTENSION_COMPOSE__?: typeof compose;
}
}
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const enhancer = composeEnhancers(
applyMiddleware(thunk, loggerMiddleware)
);
const initialState = {};
const store = createStore(rootReducer, initialState, enhancer);
export default store;
I tried to inject the store in the index but i have the same error with.. Any idea where the issues came from??
That is because TypeScript is unable to infer the typings of your redux store state.
If you have not created the types, you will need to define the types of your store using interfaces or type aliases:
export interface RootState {
// add required properties from your store
}
On your app.tsx,
import { Store as ReduxStore } from 'redux';
// other imports
interface AppProps {
store: ReduxStore<RootState>;
}
const App: React.FC<AppProps> = ({ store }) => (
<Provider store={store}>
<App onLoad={onLoad} />
</Provider>
);
I am trying to navigate to Main page once authentication is successful, I am using redux-saga for making API calls. Below is my login generator function:
import * as Type from '../actions/types';
import { takeLatest, put, call } from 'redux-saga/effects';
import firebase from 'firebase';
import { push } from 'react-router-redux';
function* loginUser(action) {
const auth = firebase.auth();
try{
console.log(action.user);
const result = yield call([auth, auth.signInWithEmailAndPassword], action.user.email, action.user.password);
console.log('login sucess');
yield put({type: Type.AUTH_SUCCESSFULL, user: action.user, authMessage:'Login Success'});
console.log('done'); //being logged
yield put(push('/home')); /not being redirected to home. Even the browser url is not changing
console.log('pushed'); //being logged
}
catch(error){
console.log(error.message);
yield put({type: Type.AUTH_FAILED, errorMessage: error.message});
}
}
I just installed react-router-redux and tried doing this, Can someone please tell me what I am doing wrong?
I faced the same issue and following is my solution. Code you have added has not an issue. You need do some extra works to make this work.
Reducer.js
import { combineReducers } from 'redux';
import { connectRouter } from 'connected-react-router';
import { History } from 'history'
const redusers = {
...
}
const mainReducer = (history: History) => combineReducers({
router: connectRouter(history),
...redusers
})
export default mainReducer;
Store.js
import { createStore, applyMiddleware } from 'redux';
import createSagaMiddleware from 'redux-saga';
import logger from 'redux-logger';
import { createBrowserHistory } from 'history'
import { routerMiddleware } from 'connected-react-router'
import mainReducer from './mainReducer';
import rootSaga from './rootSaga';
export const history = createBrowserHistory()
const configureStore = (preloadedState?: any) => {
const sagaMiddleware = createSagaMiddleware();
const store = createStore(
mainReducer(history),
preloadedState,
applyMiddleware(routerMiddleware(history), logger, sagaMiddleware),
);
sagaMiddleware.run(rootSaga);
return store;
};
export default configureStore;
index.js
import React, { Suspense } from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import App from './App';
import * as serviceWorker from './serviceWorker';
import configureStore, { history } from './store';
const store = configureStore();
const app = (
<Provider store={store}>
<App history={history} />
</Provider>
);
App.js - only added necessary code lines bellow
...
import { History } from 'history'
import { ConnectedRouter } from 'connected-react-router'
...
const {history} = props;
...
return(){
...
<ConnectedRouter history={history}>
{routes}
</ConnectedRouter>
...
}
After setting up above things on your app, it will work as you want.
The other thing is we are no longer using BrowserHistory in the app because custom history has implemented.
I've been trying to use redux-perist to save my redux-state to AsyncStorage. Although I keep getting an error:
_this.store.getState is not a function
I'm not sure why this is happening?
Here is my setup:
configureStore.js:
import {AsyncStorage,} from 'react-native';
import { createStore, applyMiddleware, compose, combineReducers, } from 'redux';
import reduxThunkMiddleware from 'redux-thunk';
import Reactotron from 'reactotron';
import * as reducers from './modules';
import devTools from 'remote-redux-devtools';
import {persistStore, autoRehydrate} from 'redux-persist'
Reactotron.connect({
enabled: __DEV__,
});
const enhancer = compose(
autoRehydrate(),
applyMiddleware(
reduxThunkMiddleware,
Reactotron.reduxMiddleware,
),
devTools()
);
export default function configureStore(initialState) {
const store = createStore(
combineReducers({
...reducers,
}),
initialState,
enhancer,
);
Reactotron.addReduxStore(store, {storage: AsyncStorage});
return store;
}
App.js:
Here is where I connect my store, to my <provider>:
import React from 'react';
import {AsyncStorage} from 'react-native';
import { Provider, connect } from 'react-redux';
import { Router } from 'react-native-router-flux';
import routes from '#routes/app';
import createStore from './redux/create'; // Returns store object from the above configureStore.js!
import {persistStore} from 'redux-persist'
const RouterWithRedux = connect()(Router);
const store = persistStore(createStore(), {storage: AsyncStorage}); // Not working??
const Kernel = () => (
<Provider store={store}>
<RouterWithRedux scenes={routes} />
</Provider>
);
export default Kernel;
const RouterWithRedux = connect()(Router);
const store = createStore();
const persistor = persistStore(store, {storage: AsyncStorage}); // Not working??
const Kernel = () => (
<Provider store={store} persistor={persistor}>
<RouterWithRedux scenes={routes} />
</Provider>
);
The problem was I had to pass down a persistor field as well as the store field.
After adding in the persistor field, my store was being persisted into AsyncStorage
EDIT:
This worked at the time - It has occured to me that this not the correct solution to the problem. But I'm still getting responses that it still works, if someone could provide another answer for everyone else, that'd be great.