Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Redux - Trying to add a function to configureStore

I am trying to persist my redux to localStorage, but I don't know how to add it to redux-toolkit's configureStore function.

Error:

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>'.

Code:

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")
);
like image 849
Gim-Cojocaru Raul-Cristian Avatar asked Jan 17 '20 10:01

Gim-Cojocaru Raul-Cristian


People also ask

How do I bypass middleware in configureStore?

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.

Is Redux getting obsolete?

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.

What is configureStore in Redux toolkit?

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.

Can I use Redux and Redux toolkit together?

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.


2 Answers

I'm the creator of Redux Toolkit. persistedState is not a valid configuration option for configureStore. The correct field name is preloadedState.

like image 89
markerikson Avatar answered Sep 27 '22 21:09

markerikson


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());
  });
like image 43
otto Avatar answered Sep 27 '22 22:09

otto