We Keep Coding

Uncaught TypeError: (0 , _createStore.default) is not a function

I am switching my redux-react app to gatsby app , I am facing this issue
and I cannot see the pages anymore.
I've tried to follow these instructions : https://github.com/gatsbyjs/gatsby/tree/master/examples/using-redux
yet I get this problem.
createStore.js :
import { createStore, applyMiddleware } from 'redux'
import logger from 'redux-logger'
import createSagaMiddle from 'redux-saga'
import rootSaga from './rootSaga'
import rootReducer from './rootReducer'
import thunk from 'redux-thunk';
const sagaMiddleware = createSagaMiddle()
export const middlewares = [thunk,sagaMiddleware,logger];
export const store = createStore(rootReducer, applyMiddleware(...middlewares))
sagaMiddleware.run(rootSaga)
export default store;
rootReducer.js:
import { combineReducers } from 'redux'
import userReducer from './User/user.reducer'
export default combineReducers({
user: userReducer
})
wrap-with-provider.js:
import * as React from 'react';
import { Provider } from 'react-redux';
import store from './src/state/createStore'
const wrapWithProvider = ({ element }) => (
<Provider store={store}>{element}</Provider>
);
export default wrapWithProvider
and gatsby-ssr.js / gatsby-browser.js:
import wrapWithProvider from "./wrap-with-provider"
export const wrapRootElement = wrapWithProvider
what probably could be the reason.

I removed brackets({}) in import and that fixed my problem. You can try this: import createStore from 'redux'

Module not found: Can't resolve './reducers' when multiple reducers

i'm trying to combineReducers
Folder Structure
src
reducers
authReducer.js
lojaReducer.js
index.js
at Index.js i'm importing it
import {lojaReducer, authReducer} from './reducers';
import { persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';
import { combineReducers } from 'redux';
const authPersistConfig = {
key: 'auth',
storage: storage,
blacklist: ['somethingTemporary']
}
export const Reducers = combineReducers ({
authState: persistReducer(authPersistConfig, authReducer),
lojaState: lojaReducer
});
but i'm getting the error
Module not found: Can't resolve './reducers'
when i do only with lojaReducer it works, how can i do to import multiple reducers?

Since the reducers are in separate files, you need to import them separately.
Something like :
import authReducer from './authReducer'
import lojaReducer from '. /lojaReducer'
Or
import { authReducer} from './authReducer'
import { lojaReducer} from './lojaReducer'
Depending if they are defined as export or export default

Uncaught TypeError: Providing your root Epic to createEpicMiddleware(rootEpic)

I am getting this error
Uncaught TypeError: Providing your root Epic to
createEpicMiddleware(rootEpic) is no longer supported, instead use
epicMiddleware.run(rootEpic)
When simply using
import 'rxjs'
import { createStore, combineReducers, applyMiddleware } from 'redux'
import { reducer as formReducer } from 'redux-form'
import thunk from 'redux-thunk'
import promise from 'redux-promise-middleware'
import { createEpicMiddleware, combineEpics } from 'redux-observable'
import app from './app'
// Bundling Epics
const rootEpic = combineEpics(
)
// Creating Bundled Epic
const epicMiddleware = createEpicMiddleware(rootEpic)
// Define Middleware
const middleware = [
thunk,
promise(),
epicMiddleware
]
// Define Reducers
const reducers = combineReducers({
form: formReducer
})
// Create Store
export default createStore(reducers,window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(), applyMiddleware(...middleware))
Kindly help to resolve this

First, take a look at this document: Official Redux-Observable Document because we're using the newest version of Redux-Observable, then reviewing its document is quite helpful.
After reviewing the document, let's see a small example project (Counter app):
This is the root.js file which contains my Epics and Reducers after bundling.
// This is a sample reducers and epics for a Counter app.
import { combineEpics } from 'redux-observable';
import { combineReducers } from 'redux';
import counter, {
setCounterEpic,
incrementEpic,
decrementEpic
} from './reducers/counter';
// bundling Epics
export const rootEpic = combineEpics(
setCounterEpic,
incrementEpic,
decrementEpic
);
// bundling Reducers
export const rootReducer = combineReducers({
counter
});
And this is store.js where I define my store before using it.
import { createStore, applyMiddleware } from 'redux';
import { createEpicMiddleware } from 'redux-observable';
import { rootEpic, rootReducer } from './root';
import { composeWithDevTools } from 'redux-devtools-extension';
const epicMiddleware = createEpicMiddleware();
const middlewares = [
epicMiddleware
]
const store = createStore(
rootReducer,
composeWithDevTools(applyMiddleware(middlewares))
);
epicMiddleware.run(rootEpic);
export default store;
In order to successfully implement redux-observable, we have to obey this order:
Creating epicMiddleware using createEpicMiddleware() method
Using the applyMiddleware() method to register the epicMiddleware (the redux-devtools-extension is optional)
Calling the epicMiddleware.run() with the rootEpic we created earlier.
This is the instruction from the Redux-Observable Document
For more information, you could find it here: : Setting Up The Middleware:

Try this
import 'rxjs'
import { createStore, combineReducers, applyMiddleware } from 'redux'
import { reducer as formReducer } from 'redux-form'
import thunk from 'redux-thunk'
import promise from 'redux-promise-middleware'
import { createEpicMiddleware, combineEpics } from 'redux-observable'
import app from './app'
// Bundling Epics
const rootEpic = combineEpics(
)
// Creating Bundled Epic
const epicMiddleware = createEpicMiddleware();
// Define Middleware
const middleware = [
thunk,
promise(),
epicMiddleware
]
// Define Reducers
const reducers = combineReducers({
form: formReducer
})
// Create Store
const store = createStore(reducers,window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(), applyMiddleware(...middleware))
epicMiddleware.run(rootEpic);
export default store
official documentation createEpicMiddleware.

Well, have you tried:
import { epicMiddleware, combineEpics } from 'redux-observable'
const epicMiddleware = epicMiddleware.run(rootEpic)
?

React+Redux - Expected the reducer to be a function

I'm trying to implement redux in my universal app, but I've some problems with redux.
I've this configureStore function:
import { createStore, applyMiddleware, compose } from 'redux';
import thunkMiddleware from 'redux-thunk';
import createLogger from 'redux-logger'
import rootReducer from '../reducers/index';
import { routerMiddleware } from 'react-router-redux';
export default function configureStore(history, initialState) {
const reduxRouterMiddleware = routerMiddleware(history);
let finalCreateStore;
if (__DEVELOPMENT__ && __CLIENT__ && __DEVTOOLS__) {
const { persistState } = require('redux-devtools');
const DevTools = require('../containers/DevTools/DevTools');
finalCreateStore = compose(
applyMiddleware(thunkMiddleware)(createStore),
window.devToolsExtension ? window.devToolsExtension() : DevTools.instrument(),
persistState(window.location.href.match(/[?&]debug_session=([^&]+)\b/))
)(createStore);
}
else {
finalCreateStore = applyMiddleware(thunkMiddleware)(createStore);
}
const store = finalCreateStore(rootReducer, initialState);
if (__DEVELOPMENT__ && module.hot) {
module.hot.accept(rootReducer, () => {
store.replaceReducer(rootReducer);
});
}
return store;
}
And then I've my rootReducer file that looks like this:
import { combineReducers } from 'redux';
import environment from './environment';
import general from './general';
import alert from './alert';
import user from './user';
import { routerReducer } from 'react-router-redux'
const rootReducer = combineReducers({
environment,
general,
alert,
user,
routing: routerReducer
});
export default rootReducer;
The problem is that I get this error: Expected the reducer to be a function.
I've googled and searched on StackOverflow(where there are some similar problems), but the answers doesn't works in my case.
So, what I'm doing wrong ? and why ?
Thanks.

try this:
finalCreateStore = compose(
// you write more than one createStore here
applyMiddleware(thunkMiddleware),
window.devToolsExtension ? window.devToolsExtension() : DevTools.instrument(),
persistState(window.location.href.match(/[?&]debug_session=([^&]+)\b/))
)(createStore);

Have you tried
import { combineReducers } from 'redux';
import environment from './environment';
import general from './general';
import alert from './alert';
import user from './user';
import { routerReducer } from 'react-router-redux'
export const rootReducer = combineReducers({
environment: environment,
general: general,
alert: alert,
user: user,
routing: routerReducer
});
export default rootReducer;

React+Redux - Uncaught Error: Actions may not have an undefined "type" property

I tried to create a simple react-redux-ajax working example, following Reddit API tutorial, but I get this error:
Uncaught Error: Actions may not have an undefined "type" property. Have you misspelled a constant?
The error is thrown by:
dispatch(fetchProducts(this.props)); in App.jsx
index.jsx
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { compose, createStore, applyMiddleware } from 'redux'
import { Provider } from 'react-redux';
import thunkMiddleware from 'redux-thunk';
import createLogger from 'redux-logger';
import { createDevTools, persistState} from 'redux-devtools';
import DevTools from './DevTools.jsx';
import App from './App.jsx';
import rootReducer from './reducers.js';
const loggerMiddleware = createLogger();
function configureStore(initialState) {
return createStore(
rootReducer,
initialState,
DevTools.instrument(),
applyMiddleware(
thunkMiddleware,
loggerMiddleware
),
// Lets you write ?debug_session=<name> in address bar to persist debug sessions
persistState(window.location.href.match(/[?&]debug_session=([^&]+)\b/))
)
}
const store = configureStore();
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>, document.getElementsByClassName('products')[0]);

You just forgot to compose your enhancers, the third argument to createStore must be a function so you need to compose all your enhancers to provide a unique enhancer :
index.jsx
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { compose, createStore, applyMiddleware } from 'redux'
import { Provider } from 'react-redux';
import thunkMiddleware from 'redux-thunk';
import createLogger from 'redux-logger';
import { createDevTools, persistState} from 'redux-devtools';
import DevTools from './DevTools.jsx';
import App from './App.jsx';
import rootReducer from './reducers.js';
const loggerMiddleware = createLogger();
function configureStore(initialState) {
return createStore(
rootReducer,
initialState,
compose(
applyMiddleware(
thunkMiddleware,
loggerMiddleware
),
DevTools.instrument(),
persistState(window.location.href.match(/[?&]debug_session=([^&]+)\b/))
)
)
}
const store = configureStore();
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>, document.getElementsByClassName('products')[0]);
Redux DevTool doc