I am trying to persist my redux to localStorage, but I don't know how to add it to redux-toolkit's configureStore function.
Argument of type '{ reducer: { progress: Reducer; }; persistedState: any; }' is not assignable to parameter of type 'ConfigureStoreOptions<{ progress: number; }, AnyAction>'. Object literal may only specify known properties, and 'persistedState' does not exist in type 'ConfigureStoreOptions<{ progress: number; }, AnyAction>'.
localStorage.ts
export const loadState = () => {
try {
const serializedState = localStorage.getItem("state");
if (serializedState === null) {
return undefined;
}
return JSON.parse(serializedState);
} catch (err) {
return undefined;
}
};
index.tsx
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import counterSlice from "./store/reducers/counterSlice";
import { configureStore } from "@reduxjs/toolkit";
// import throttle from "lodash.throttle";
import { Provider } from "react-redux";
import { loadState, saveState } from "./store/localStorage";
const reducer = {
progress: counterSlice
};
const persistedState = loadState();
const store = configureStore({
reducer,
persistedState
});
store.subscribe(() => {
saveState({
progress: store.getState().progress
});
});
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById("root")
);
middleware If this option is provided, it should contain all the middleware functions you want added to the store. configureStore will automatically pass those to applyMiddleware . If not provided, configureStore will call getDefaultMiddleware and use the array of middleware functions it returns.
The redux core package still works, but today we consider it to be obsolete. All of its APIs are also re-exported from @reduxjs/toolkit , and configureStore does everything createStore does but with better default behavior and configurability.
Redux Toolkit has a configureStore() method that simplifies the store setup process. configureStore() wraps around the Redux library's createStore() method and the combineReducers() method, and handles most of the store setup for us automatically.
Redux Toolkit is a set of tools that helps simplify Redux development. It includes utilities for creating and managing Redux stores, as well as for writing Redux actions and reducers. The Redux team recommends using Redux Toolkit anytime you need to use Redux.
I'm the creator of Redux Toolkit. persistedState
is not a valid configuration option for configureStore
. The correct field name is preloadedState
.
Instead of using configureStore use createStore. For me this works:
const store = createStore(
reducer,
persistedState
);
full example:
const loadFromLocalStorage = () => {
try {
const serializedState = localStorage.getItem('state');
return JSON.parse(serializedState);
} catch (e) {
throw new Error(e)
}
};
const saveToLocalStorage = state => {
try {
const serializedState = JSON.stringify(state);
localStorage.setItem('state', serializedState);
} catch (e) {
throw new Error(e)
}
};
const state= loadFromLocalStorage();
const store = createStore(
reducer,
state
);
store.subscribe(() => {
saveToLocalStorage(store.getState());
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With