We Keep Coding

Recieving 'Attempted import error" message in first MERN application

This is my first application I am building with the MERN stack and currently I am going through a tutorial. For some reason I cannot figure out the message :
Attempted import error: 'reducers' is not exported from './reducers'.
This is currently my code in my App.js:
import React from "react";
import ReactDom from "react-dom";
import { Provider } from "react-redux";
import { createStore, applyMiddleware, compose } from "redux";
import thunk from "redux-thunk";
import { reducers } from "./reducers";
import App from "./App";
const store = createStore(reducers, compose(applyMiddleware(thunk)));
ReactDom.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById("root")
);
In the reducers file:
posts.js
export default reducers = (posts = [], action) => {
switch (action.type) {
case "FETCH_ALL":
return action.payload;
case "CREATE":
return posts;
default:
return posts;
}
};
index.js
import { combineReducers } from "redux";
import Post from "./posts";
export default combineReducers({ posts });
to get a better visual this is currently my screen:
computer screen

In your reducers/index.js, you are exporting it as default. Therefore, if you want to import it in your src/index.js, you need to use import reducers from "./reducers" (with no curly braces).
Another approach is that you can use export const reducers = combineReducers({ posts }); in reducers/index.js, then you don't need to modify src/index.js.
You can read more about the document on export in JavaScript.

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'

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)
?

Unable to resolve ./Reducers react native

I'm following the following tutorial:
https://medium.com/react-native-training/tutorial-react-native-redux-native-mobile-app-for-tracking-cryptocurrency-bitcoin-litecoin-810850cf8acc
When I run my app, I get the following error message:
Unable to resolve ./Reducers" from
"./C:\Users\Bryan\Documents\React-native\AwesomeProject\src\Store.js:
could not resolve
C:\Users\Bryan\Documents\React-native\AwesomeProject\src\Reducers'
as a file nor as a
folder","name":"UnableToResolveError","type":"UnableToResolveError","errors":[{}]},"type":"bundling_error"}"
Here Is my Store.js
import { Platform } from 'react-native';
import {
createStore,
applyMiddleware,
compose
} from 'redux';
import devTools from 'remote-redux-devtools';
import promise from 'redux-promise';
import thunk from 'redux-thunk';
import logger from 'redux-logger';
import RootReducer from './Reducers';
const middleware = applyMiddleware(thunk, promise, logger);
const Store = createStore (
RootReducer,
compose(
middleware,
devTools({
name: Platform.OS,
hostname: 'localhost',
port: 5678
}),
)
);
export default Store;
And in my Reducers-folder, I have the following files:
CryptoReducer.js
export default function(state = [], action) {
return state;
}
Index.js
import {combineReducers} from 'redux';
import CryptoReducer from './CryptoReducer.js';
export default combineReducers({
crypto: CryptoReducer
});
Why do I get this error? Why is it not working and how can I to solve this?

es6 import gives undefined on named export

I have this simple import:
import {reducers as sharedStore} from "./components/shared";
and have this exports on the index.js file located in side the
./components/shared
folders.
this is index.js content:
import {combineReducers} from "redux";
export const reducers = combineReducers({selectAssetView, video:videoReducerComp });