createStore is #deprecated so im trying to replace with configurationStore, i think the post data from my cluster is not showing because of that
```
import React from 'react';
import ReactDom from 'react-dom/client';
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))))
const root = ReactDom.createRoot(document.getElementById("root"));
root.render(
<Provider store={store}>
<App />
</Provider>
);
And im trying to do it like this:
import React from 'react';
import ReactDom from 'react-dom/client';
import { Provider } from 'react-redux';
import { applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import { configureStore } from '#reduxjs/toolkit'
import reducers from "./reducers";
import App from './App'
const store = configureStore(reducers, (compose(applyMiddleware(thunk))))
const root = ReactDom.createRoot(document.getElementById("root"));
root.render(
<Provider store={store}>
<App />
</Provider>
);
```
Of Course it didn't work i'm trying to figure out how it could be
You would do
const store = configureStore({ reducer: reducers })
The thunk middleware is active automatically. compose and applyMiddleware are not needed any more. So is combineReducers.
If you had
const reducers = combineReducers({
a: reducerA,
b: reducerB
})
you could also just instead do
const store = configureStore({
reducer: {
a: reducerA,
b: reducerB
}
})
If you were still using createStore, that means that you were generally using an outdated style of Redux that is about 4x times the code of modern Redux.
Modern Redux does not use switch..case reducer, ACTION_TYPE constants, immutable reducer logic, hand-written action creators or connect & mapStateToProps. You might have been misled by an outdated tutorial.
I would highly recommend you to follow the official Redux tutorial which will leave you with knowledge of modern Redux and in the end much cleaner and easy to maintain code.
Related
I stuck with this error:
Uncaught Error: Expected the root reducer to be a function. Instead, received:''
I've tried every answer I could find but none of them worked, I hope you guys can help me
My rootReducer
import {combineReducers} from 'redux'
import changeCategoryReducer from './changeCategoryReducer'
import categoryListReducer from './categoryListReducer'
import productListReducer from './productListReducer'
import cartReducer from './cartReducer'
import saveProductReducer from './saveProductReducer'
const rootReducer = combineReducers({
changeCategoryReducer,
categoryListReducer,
productListReducer,
cartReducer,
saveProductReducer
});
export default rootReducer;
configure Store
import {createStore, applyMiddleware} from 'redux'
import * as rootReducer from './index.js'
import thunk from 'redux-thunk'
export default function configureStore(){
return createStore(rootReducer, applyMiddleware(thunk))
}
index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './components/root/App';
import reportWebVitals from './reportWebVitals';
import 'bootstrap/dist/css/bootstrap.min.css';
import { Provider } from 'react-redux'
import configureStore from './redux/reducers/configureStore'
import 'alertifyjs/build/css/alertify.min.css'
import { BrowserRouter } from 'react-router-dom'
const store = configureStore();
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<BrowserRouter>
<Provider store={store}>
<App />
</Provider>
</BrowserRouter>
</React.StrictMode>
);
reportWebVitals();
You're not correctly importing your rootReducer in the store creation.
Instead of importing *, you should import the default export:
import {createStore, applyMiddleware} from 'redux'
import rootReducer from './index.js' // <-- change here
import thunk from 'redux-thunk'
export default function configureStore(){
return createStore(rootReducer, applyMiddleware(thunk))
}
using import * as rootReducer from './index.js' means you end up with an object like:
rootReducer: {
default: createReducer(...)
}
Hello I am working on Shopping List and my file looks like this:
import React, { Component } from 'react';
import AppNavbar from './components/AppNavbar';
import ShoppingList from './components/ShoppingList';
import {Provider} from 'react-redux';
import store from './';
import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css';
function App() {
return (
<Provider store={store}>
<div className="App">
<AppNavbar/>
<ShoppingList/>
</div>
</Provider>
);
}
export default App;
However, Ireceived this error:
Failed to compile
./src/App.js
Attempted import error: './' does not contain a default export (imported as 'store').
can someone please help fix this ?
The problem in your code is how you are trying load the store with import store from './';.
Instead you need to use createStore() from redux as the following:
import { createStore, applyMiddleware } from 'redux';
const store = createStore(
/* your reducers */,
applyMiddleware( /* your middleware */ ),
);
What you can pass to the <Provider /> as follows:
ReactDOM.render(<Provider store={store}>
<App />
</Provider>, document.getElementById('root'));
Read further here about createStore(reducer, \[preloadedState\], \[enhancer\]) which:
Creates a Redux store that holds the complete state tree of your app. There should only be a single store in your app.
I hope this helps!
import React, { Component } from 'react';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import reducers from './reducers';
import Posts from './containers/Posts'
import NavBar from './components/NavBar';
// Apply Thunk middleware
const middleware = applyMiddleware(thunk);
// Create store
const store = createStore(reducers, enhancer);
class App extends Component {
render() {
return (
<Provider store={store}>
<React.Fragment>
<NavBar />
<Posts />
</React.Fragment>
</Provider>
);
As you can see, the app.js page should be looked like this. You can't just import store from another file. It's better to use best practices like this.
Now you will wonder how the reducers came from. Generally, developers put all the reducers in a reducers folder. In that folder you can have a index.js file and other reducer files. For now, you better use a empty main reducer index.js like below.
import { combineReducers } from 'redux'
const rootReducer = combineReducers({
null
})
export default rootReducer;
If you something like post or whatever, the code should be modified like this.
import { combineReducers } from 'redux'
import posts from './posts';
const rootReducer = combineReducers({
posts: posts
})
export default rootReducer;
Simply, posts is a post reducer in the reducers folder. Selecting a appropriate middleware is up to you. I have used redux-thunk. You can use redux-saga, redux-logic, or custom middleware. I think this will help you to solve your problem.
I wonder how rootReducer is used in the official redux todo list example on https://redux.js.org/basics/example-todo-list. It looks like reducers are not getting called after the rootReducer is passed to the store.
import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import { createStore } from 'redux'
import rootReducer from './reducers'
import App from './components/App'
const store = createStore(rootReducer)
render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
)
I am trying to add persistence to my redux stores, I am using Immutable.js within my webapp. I have seen the following libraries: https://github.com/rt2zz/redux-persist and https://github.com/rt2zz/redux-persist-immutable I am wondering exactly how to create the persister and the store in context of my application, please see the following config-store.js:
import rootReducer from '../reducers'
import {
createStore,
compose,
applyMiddleware
} from 'redux'
import thunk from 'redux-thunk'
export default (initialState) => {
return createStore(
rootReducer,
initialState,
compose(
applyMiddleware(thunk),
window.devToolsExtension ? window.devToolsExtension() : f => f
)
);
};
and my index.js:
import React from 'react';
import {render} from 'react-dom';
import './index.css';
import App from './App';
import {Provider} from 'react-redux';
import configureStore from './store/configure-store';
import registerServiceWorker from './registerServiceWorker';
const store = configureStore();
render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
)
registerServiceWorker();
Load the persiting state from local storage.
if (localStorage.getItem("state")) {
var serializedState = localStorage.getItem("state");
/* upload changes to server here */
preloadedState = JSON.parse(serializedState);
}
Save store changes to local storage.
store.subscribe(() => {
var serializedState = JSON.stringify(store.getState());
localStorage.setItem("state", serializedState);
});
Here is my code:
store.js
import {createStore, applyMiddleware, compose} from 'redux';
import {fromJS} from 'immutable';
import {routerMiddleware} from 'react-router-redux';
import createSagaMiddleware from 'redux-saga';
import createReducer from './reducers';
const sagaMiddleware = createSagaMiddleware();
export default function configureStore(initialState = {}, history) {
// Create the store with two middlewares
// 1. sagaMiddleware: Makes redux-sagas work
// 2. routerMiddleware: Syncs the location/URL path to the state
const middlewares = [sagaMiddleware, routerMiddleware(history)];
const enhancers = [applyMiddleware(...middlewares)];
const store = createStore(createReducer, fromJS(initialState), enhancers);
// Extensions
store.runSaga = sagaMiddleware.run;
store.asyncReducers = {}; // Async reducer registry
return store;
}
Routes.js
import React from 'react';
import {Route, Router, IndexRoute, browserHistory} from 'react-router';
import {syncHistoryWithStore} from 'react-router-redux';
import store from './store';
import Welcome from './containers/Welcome';
const history = syncHistoryWithStore(browserHistory, store);
const routes = (
<Router history={history}>
<Route path="/">
<IndexRoute component={Welcome} />
</Route>
</Router>
);
export default routes;
Index.js
import React from 'react';
import ReactDOM from 'react-dom';
import {browserHistory} from 'react-router';
import { Providers } from 'react-redux';
import configureStore from './store';
import routes from './routes';
const initialState = {};
const store = configureStore(initialState, browserHistory);
ReactDOM.render(
<Provider store={store}>
{routes}
</Provider>, document.getElementById('main-content')
);
I can't find where the culprit is. I tried to debug it, but can't found what really make it those error. error: Uncaught TypeError: store.getState is not a function
Any solution?
This is a typo that generated the error: TypeError: store.getState is not a function
Wrong
const store = createStore(()=>[], {}, applyMiddleware);
Correct
const store = createStore(()=>[], {}, applyMiddleware());
Notice the added parenthesis () on applyMiddleware.
in my case i got this error because my store was as shown below which is a function:
const store = preloadedState => {
let initialState={}
//some code to modify intialState
return createStore(reducer, initialState)
}
but in index.js i was passing store as a function and not the value it was returning.
wrong
<Provider store={store}>
<MyApp />
</Provider>
correct
<Provider store={store()}>
<MyApp />
</Provider>
Notice that in your Routes.js the store is not being initialized properly. You should add these lines:
const initialState = {};
const store = configureStore(initialState, browserHistory);
as in your index.js file.
I was doing this (a dynamic require) ..
const store = require('../store/app')
state = store.getState()
but for some reason when using require instead of import you have to do this ..
const store = require('../store/app')
state = store.default.getState()
Not sure if this will help but you named your import { Providers } instead of { Provider } from react-redux library.
In index.js we have to provide store() method as props value instead of store.
<Provider store={store()}>
{routes}
</Provider>
Updated index.js file.
import React from 'react';
import ReactDOM from 'react-dom';
import {browserHistory} from 'react-router';
import { Providers } from 'react-redux';
import configureStore from './store';
import routes from './routes';
const initialState = {};
const store = configureStore(initialState, browserHistory);
ReactDOM.render(
<Provider store={store()}>
{routes}
</Provider>, document.getElementById('main-content')
);
this is the solution, good luck 🤞
import { applyMiddleware, combineReducers, createStore } from "redux";
import { composeWithDevTools } from "redux-devtools-extension";
import thunk from 'redux-thunk'
const reducer = combineReducers({
products: []
})
const middleware = [thunk]
const store = createStore(
reducer,
composeWithDevTools(applyMiddleware(...middleware))
)
export default store
TypeError: store.getState is not a function -This error often occurs when you are not properly initializing middleware function. What you need to do is as below
You need to add paranthesis on applyMiddleware ( ) function and then it will behave as you are expecting it to do.
const store = createStore(()=>[], {}, applyMiddleware());
Replacing store with store() worked for me. Written below:
<Provider store={store()}>
{routes}
</Provider>