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.
Related
index.js
import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import App from './App'
import { Provider } from 'react-redux'
import store from './store'
ReactDOM.render(
<React.StrictMode>
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>,
document.getElementById('root')
)
store.js
import { createStore, combineReducers } from 'redux'
import thunk from 'redux-thunk'
import { composeWithDevTools } from 'redux-devtools-extension'
import { bookReducers } from './reducers/bookReducers'
const reducer = combineReducers({
book: bookReducers,
})
const middleware = [thunk]
const initialState = {
books: [],
isLoading: false,
eror: '',
}
const store = createStore(
reducer,
initialState,
composeWithDevTools(...middleware)
)
export default store
error I got in my console
I got this error from provider component while adding prop store but its the same as in redux docs . what is happening here
Newbie here in the world of reactjs. I tried using redux and redux thunk along with reducers, though I don't full understand if they are all in one package. I'm creating a login in that will using those items. But I kept on seeing store.getstate is not a function.
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import {Provider} from 'react-redux';
const store = require('./store/index');
ReactDOM.render(
//<React.StrictMode>
<Provider store="{store()}">
<App />
</Provider>,
//</React.StrictMode>,
document.getElementById('root')
);
store/index.js
import {createStore} from 'redux'
import AllReducers from './reducers/AllReducers';
// import
const initialStates = {
auth: {
loggedIn: false,
user:{}
}
}
const store = createStore(AllReducers,initialStates);
export default store;
store/reducers/AllReducers.js
import { combineReducers } from "redux";
import AuthReducer from "./AuthReducer";
const AllReducers = combineReducers({auth: AuthReducer})
export default AllReducers;
store/reducers/AuthReducers.js
const AuthReducer = (state = {}, actions) => {
switch (actions.type) {
case 'value':
return state;
default:
return state;
}
}
export default AuthReducer;
I kept on getting the TypeError: store.getState is not a function
Can someone help me at least an advice on how to trap this error then i will do the rest for my studying.
Thanks.
I think you did mistake here.
<Provider store="{store()}">
You should write
<Provider store={store}>
I hope this answer will help you!!
The problem in <Provider store="{store()}">. You need to update like this:
<Provider store={store}>
I got - Error: Could not find router reducer in state tree, it must be mounted under "router".
I've read all the similar topics. Tryed different variants, but can't find solution. I still don't have enough knowledge to understand the subject. Plz help to fix this error if you know how.
index.js
import { render } from 'react-dom';
import { Provider, ReactReduxContext } from 'react-redux';
import React from 'react';
import { store, history} from './store';
import { Route, Switch } from 'react-router-dom';
import { ConnectedRouter } from 'connected-react-router'
import App from './components/App/App';
render(
<Provider store={store}>
<ConnectedRouter history={history} context={ReactReduxContext}>
<Switch>
<Route path="/" component={App} />
</Switch>
</ConnectedRouter>
</Provider>,
document.getElementById('root')
);
part of reducers.js
import { combineReducers } from 'redux';
import { routerReducer } from 'react-router-redux';
export default combineReducers({
router: routerReducer
});
store.js
import { applyMiddleware, createStore } from 'redux';
import { createLogger } from 'redux-logger';
import { promiseMiddleware, localStorageMiddleware } from './middleware';
import reducer from './reducers/reducers';
import { routerMiddleware } from 'react-router-redux'
import { createBrowserHistory } from 'history';
export const history = createBrowserHistory();
const getMiddleware = () => applyMiddleware(
routerMiddleware(history), promiseMiddleware, localStorageMiddleware, createLogger()
);
export const store = createStore(
reducer,
getMiddleware(),
);
tryed do like this:
in store.js
import { applyMiddleware, createStore } from 'redux';
import { createLogger } from 'redux-logger';
import { promiseMiddleware, localStorageMiddleware } from './middleware';
import reducer from './reducers/reducers';
import { createBrowserHistory } from 'history';
import { routerMiddleware } from 'connected-react-router';
export const history = createBrowserHistory();
const myRouterMiddleware = routerMiddleware(history);
const getMiddleware = () => applyMiddleware(
myRouterMiddleware, promiseMiddleware, localStorageMiddleware, createLogger()
);
export const store = createStore(
reducer(history),
getMiddleware()
);
in reducers.js
import authorization from './authorization';
import mainstate from './mainstate';
import home from './home';
import { combineReducers } from 'redux';
import { connectRouter } from 'connected-react-router'
export default (history) => combineReducers({
authorization,
mainstate,
home,
router: connectRouter(history)
});
got the same error :(
There are a couple of issues.
createStore(reducer, getMiddleware()) - the enhancer (middleware) needs to be the third argument, the second argument should be the store's initial state. See the docs here.
Try this instead
createStore(reducer, {}, getMiddleware())
The other issue is the version of the history package, with react-router-dom v5 you need to use history v4 (the latest version of which is 4.10.1) - history v5 is only compatible with react-router-dom v6.
In the Codesandbox you posted in your comment below, changing the following in package.json makes it work
"dependencies": {
...
"history": "^5.0.0", -> "history": "4.10.1",
...
}
Lot of solutions out there are pointing at history library version.
The version 5.x of the history package is causing the issues as above.
Could you please try downgrading the history version to 4.10.1 as suggested here
I recieve this error message when I run my react app:
Could not find "store" in the context of "Connect(Booklist)". Either
wrap the root component in a , or pass a custom React
context provider to and the corresponding React context
consumer to Connect(Booklist) in connect options.
I'm using Create React App and trying to create an app that lists some details.
See code below:
app.js
import React, { Component } from 'react';
import './App.css';
import Booklist from './container/book-list';
class App extends Component {
render() {
return (
<div className="App">
<Booklist />
</div>
);
}
}
export default App;
book-list.js
import React, {Component} from 'react';
import { connect } from 'react-redux';
class Booklist extends Component{
renderList(){
return this.props.books.map((book) =>{
return(
<li key={book.title}>{book.title}</li>
);
}
);
}
render(){
return this.props.books.map((book) =>{
return(
<ul>{this.renderList()}</ul>
);
}
);
}
}
function mapStateToProps(state){
return {
books: state.books
}
}
export default connect (mapStateToProps)(Booklist);
books_reducer.js
export default function(){
return[
{title: booke1},
{title: booke2},
{title: booke3},
{title: booke3}
]
}
index.js in reducer
import {combineReducers} from redux;
import booksReducer from './books_reducer'
const rootReducer = combineReducers({
books: booksReducer
});
export default booksReducer;
Are you wrapping your app in your store?
import { Provider } from 'react-redux';
const store = createStore(
combineReducers({
books: booksReducer
});
)
<Provider store={store}>
<App />
</Provider>
When we use Redux we have to createStore for store all reducers of our app.we combine all Reducers in single component like .
import {combineReducers} from 'redux';
import BooksReducer from './Books';
import ActiveBookReducer from './activeReducer';
const RootReducer = combineReducers({
books : BooksReducer,
activeBookreducer : ActiveBookReducer
})
export default RootReducer;
In Above Example I create Two Reducers BookReducer and ActiveBookReducer and I stored both in single Reducer called RootReducer using combineReducer.
First import provider and createStore libraries in your index.js file.
import your RootReducer in your index.js file.
Then take one variable called store and stored RootReducer using createStore library .const store = createStore(RootReducer);
Then add provider in index.js: <Provider store = {store}>
<App />
</Provider>,
Your code should look like this :
import React from 'react';
import ReactDOM from 'react-dom';
import {Provider} from 'react-redux';
import { createStore } from 'redux';
import App from './Components/App';
import RootReducer from './Reducers';
const store = createStore(RootReducer);
ReactDOM.render(
<Provider store = {store}>
<App />
</Provider>,
document.getElementById('root')
);
I'm following the Let’s Build: Cryptocurrency Native Mobile App With React Native + Redux tutorial.
When I create my store in App.js, the app works fine
import { createStore, applyMiddleware, compose } from 'redux';
import devTools from 'remote-redux-devtools';
import React, { Component } from 'react';
import { Platform, View } from 'react-native';
import { Provider } from 'react-redux';
import promise from 'redux-promise';
import thunk from 'redux-thunk';
import logger from 'redux-logger';
import { Header, CryptoContainer } from './src/components';
import rootReducer from './src/reducers';
const middleware = applyMiddleware(thunk, promise, logger);
const Store = createStore(rootReducer, compose(middleware, devTools({
name: Platform.OS,
hostname: 'localhost',
port: 5678
}), ));
export default class App extends Component {
render() {
return (
<Provider store={Store}>
<View>
<Header />
<CryptoContainer />
</View>
</Provider>
);
}
}
but when I move the store logic to a new file ./src/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 use it in App.js like
import React, { Component } from 'react';
import { View } from 'react-native';
import { Provider } from 'react-redux';
import { Header, CryptoContainer } from './src/components';
import { Store } from './src/Store';
export default class App extends Component {
render() {
return (
<Provider store={Store}>
<View>
<Header />
<CryptoContainer />
</View>
</Provider>
);
}
}
I get
TypeError: undefined is not an object (evaluating 'store.getState')
What's causing my build (expo start) to fail when I import Store.js?
It seems the import statement is not right. It should be:
import Store from './src/Store';
if you're importing a single named export
e.g where you've done export const MyComponent = () => {} you'd import it like import { MyComponent } from "./MyComponent"
if you're importing a default export e.g where you've done const MyComponent = () => {} export default MyComponent you'd import it like import MyDefaultComponent from "./MyDefaultExport"
I got this error because I was exporting the wrong component from my main App file.
I was exporting this:
import React from 'react'
import { Provider } from 'react-redux'
import { createAppContainer } from 'react-navigation'
import Navigator from './src/components/Navigator'
import { store } from './src/store'
const App = createAppContainer(Navigator);
const Wrapped = props => (
<Provider store={store}>
<App />
</Provider>
)
export default Provider; // wrong!
That last line should be:
export default Wrapped; // right!
The answer from Itunu Adekoya shows that you can decide how you want to export / import, and in this case about personal preference, as there isn't a perf difference.
In the case where you have a lot of exports from a file, and perhaps some are unrelated or won't all be used together, it is better to export them individual as consts and then in other file only import what you need via import { } format, this will be sure to only include relevant imprts
in my case its casing & named import issue. imported as
import store from './Redux/Store'
it should be
import {Store} from './Redux/Store'