ReactJS Redux Provider won't take the store-CodePudding

I am trying to update my redux store from "createStore" to "configureStore" because of the depreciation of "createStore". I'm on ReactJS 17 with TypeScript, and Redux / Redux dependencies versions are :

"redux": "^4.2.0",
"redux-devtools-extension": "^2.13.9",
"redux-thunk": "^2.4.1",
"@reduxjs/toolkit": "^1.8.3",

Problem is, after configured the store, the Provider on my index.tsx, won't take the store. I've got this error :

Cannot assign type '(preloadedState?: PreloadedState<RootState>) => EnhancedStore<CombinedState<{ orders: any; auth: {}; errors: {}; }>, any, MiddlewareArray<[ThunkMiddleware<CombinedState<{ orders: any; auth: {}; errors: {}; }>, AnyAction, undefined>]>>' to type 'Store<any, AnyAction>'.ts(2322

I checked the Redux documentation, checked StackOverflow & Google, but I can't find any solution.

Here are my pages :

store.tsx

import { configureStore, PreloadedState } from "@reduxjs/toolkit"
import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux";
import rootReducer from "./reducer/rootReducer"

export const store = (preloadedState?: PreloadedState<RootState>) => {
    return configureStore({
      reducer: rootReducer,
      middleware: (getDefaultMiddleware) => getDefaultMiddleware(),
      preloadedState
      
    })
}

export default store;
export type RootState = ReturnType<typeof rootReducer>;
export type AppStore = ReturnType<typeof store>;
export type AppDispatch = AppStore['dispatch'];
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
export const useAppDispatch = () => useDispatch<AppDispatch>();

index.tsx

import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { Provider } from 'react-redux';
import { consultFilters } from './actions/Actions';
import { store } from './store';



store.dispatch(consultFilters());

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

CodePudding user response：


export const store = (preloadedState?: PreloadedState<RootState>) => {
    return configureStore({
      reducer: rootReducer,
      middleware: (getDefaultMiddleware) => getDefaultMiddleware(),
      preloadedState
      
    })
}

This is not a Redux store - it's a function that creates a Redux store.

Either just do

export const store = configureStore({
      reducer: rootReducer,
      middleware: (getDefaultMiddleware) => getDefaultMiddleware(),
    }

or if you need that callback


export const makeStore = (preloadedState?: PreloadedState<RootState>) => {
    return configureStore({
      reducer: rootReducer,
      middleware: (getDefaultMiddleware) => getDefaultMiddleware(),
      preloadedState
    })
}

export const store = makeStore()

By the way, if you really are just doing

      middleware: (getDefaultMiddleware) => getDefaultMiddleware(),

you can drop that whole line. The default middleware is, as the name implies, the default.

Also, please note that the deprecation of createStor is just an indicator that your whole code base might be following a style of Redux that is outdated since 2019 and is about 4 times the code of modern Redux (and a lot more error-prone). Please read https://redux.js.org/introduction/why-rtk-is-redux-today