createStore got deprecated

[solodev02]

getting a error after installing react-toolkit
because createStore function is no more present in the 'redux' module
what to do?
it was told in the video that once we paste the json file we don't have to install anymore dependencies any more for client , may we this could be the reason for the error?
how to fix it.

[NgatiaJeffers]

Apparently, when you install the redux toolkit createStore() becomes depreciated, you can replace it with configureStore() which wraps createStore() to provide simplified configuration options.

A good example to config a store is:

import React from 'react';
import ReactDOM from 'react-dom/client';
import { Provider } from 'react-redux';
import { configureStore } from "@reduxjs/toolkit";

import reducers from "./reducers";

import App from './App';

const store = configureStore({ reducer: reducers })

you can check out the redux toolkit solution to configureStore
https://redux.js.org/usage/configuring-your-store#the-solution-configures

Hopefully this helps.

[EduardoBDonovan]

Getting the same issue... please advise with an example from the video ex(reducer, middleware, etc)

[nathanlao]

Getting the same issue... please advise with an example from the video ex(reducer, middleware, etc)

I think this should work:

import { Provider } from 'react-redux'; // initialize redux'
import { applyMiddleware, compose } from 'redux';
import { configureStore } from '@reduxjs/toolkit';
import thunk from 'redux-thunk';
import reducers from './reducers';

import App from './App';

const store = configureStore(reducers, compose(applyMiddleware(thunk)));

[Gagenrllc]

I'm stuck on this step as well.
The error im getting is this.

My code looks like this.

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { applyMiddleware, compose} from 'redux';
import { configureStore } from '@reduxjs/toolkit';
import thunk from 'redux-thunk';

import reducers from './reducers';
import App from './App'

//const store = createStore(reducers,compose(applyMiddleware(thunk)))
const store = configureStore({reducer: reducers}, compose(applyMiddleware(thunk)));
//const store = configureStore({reducer: reducers});

ReactDOM.render(
<Provider STORE={store}>
    <App />
</Provider>, document.getElementById('root'));

[NgatiaJeffers]

I'm stuck on this step as well. The error im getting is this.

My code looks like this.

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { applyMiddleware, compose} from 'redux';
import { configureStore } from '@reduxjs/toolkit';
import thunk from 'redux-thunk';

import reducers from './reducers';
import App from './App'

//const store = createStore(reducers,compose(applyMiddleware(thunk)))
const store = configureStore({reducer: reducers}, compose(applyMiddleware(thunk)));
//const store = configureStore({reducer: reducers});

ReactDOM.render(
<Provider STORE={store}>
    <App />
</Provider>, document.getElementById('root'));

Apparently what I'm thinking is you are using the latest redux toolkit,
Assuming that I would urge you to consider this solution

All the logic related to configuring the store - including importing reducers, middleware, and enhancers - is handled in a dedicated file in a configureStore function

import React from 'react';
import ReactDOM from 'react-dom/client';
import { Provider } from 'react-redux';
import { configureStore } from "@reduxjs/toolkit";

import reducers from "./reducers";

import App from './App';

const store = configureStore({ reducer: reducers })

You could refer to the redux toolkit for more clarity.
https://redux.js.org/usage/configuring-your-store#the-solution-configurestore

[ghost]

For the record this has nothing to do with your actual application code. It is specifically a message to users like you who are using "plain Redux" - it's trying to tell you that you're following patterns that are much harder to use, and we want you to use Redux Toolkit instead because it will make your life much easier :)

You'll note that this isn't even a runtime warning being printed in the console - it's literally just a visual indicator in your editor, like createStore.

[AAdewunmi]

I'm stuck on this step as well. The error im getting is this.

My code looks like this.

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { applyMiddleware, compose} from 'redux';
import { configureStore } from '@reduxjs/toolkit';
import thunk from 'redux-thunk';

import reducers from './reducers';
import App from './App'

//const store = createStore(reducers,compose(applyMiddleware(thunk)))
const store = configureStore({reducer: reducers}, compose(applyMiddleware(thunk)));
//const store = configureStore({reducer: reducers});

ReactDOM.render(
<Provider STORE={store}>
    <App />
</Provider>, document.getElementById('root'));

Apparently what I'm thinking is you are using the latest redux toolkit, Assuming that I would urge you to consider this solution

All the logic related to configuring the store - including importing reducers, middleware, and enhancers - is handled in a dedicated file in a configureStore function

import React from 'react'; import ReactDOM from 'react-dom/client'; import { Provider } from 'react-redux'; import { configureStore } from "@reduxjs/toolkit";

import reducers from "./reducers";

import App from './App';

const store = configureStore({ reducer: reducers })

You could refer to the redux toolkit for more clarity. https://redux.js.org/usage/configuring-your-store#the-solution-configurestore

Hey, tried your fix but it didnt work.

Check out my code par the same issue.

Will appreciate your assistance.

#177 (comment)

[AAdewunmi]

FYI: @solodev02, @EduardoBDonovan, @Gagenrllc

Issue fixed!
If you are having issues with Redux createStore() being depreciated, here's how to use configureStore():

1. Run on server side console ->

NPM

npm install @reduxjs/toolkit

Yarn

yarn add @reduxjs/toolkit

2. Include configureStore() in your client/src/index.js file

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 { configureStore } from "@reduxjs/toolkit";
import reducers from "./reducers";
import App from "./App";
import "./index.css";

// const store = createStore(reducers, compose(applyMiddleware(thunk)));
const store = configureStore({ reducer: reducers });
ReactDOM.render(
    <Provider store={store}>
       <App />
    </Provider>,
  document.getElementById("root")
);

Job done!