kilkelly / redux-localstorage-simple Goto Github PK

Hey,

Could you add the option to make the namespace customisable?

Cheers,

Apart from having states argument for save() method, It would be really useful to have an option to specify certain branches that should be ignored.

For example, I'm using connected-react-router in my application and when combined with redux-localstorage-simple, it's impossible to navigate properly when accessing different pages directly via URL. Currently I have to specify every state branch that I want to persist, which is every branch other than router. This becomes a bit annoying when working with big state trees. It would be awesome if I could simply state, that I want to ignore only router.

Example:
A state:

{
  router: ...,
  user: ...,
  form: ...,
  data: ...,
  otherData: ...,
 /* and many more */
}

How I need to use the save() method currently:

applyMiddleware(save({
  states: ['user', 'form', 'data', 'otherData', /* and many more */ ]
}))

How my proposed feature would work:

applyMiddleware(save({
  ignore: ['router']
}))

Not very important as the clear action can be debounced easily by the user, but for the sake of completion, could clear also have a debounce option?
If save is debounced, then clearing at a certain point in state history is overriden with the debounced save.

When trying to use the package I get the following error message:
[at-loader] ./node_modules/redux-localstorage-simple/dist/index.d.ts:23:40
TS1047: A rest parameter cannot be optional.

This seems to relate to

export function combineLoads(...loads?: object[]): object

and as far as I can fathom the error message is correct and it should be

export function combineLoads(...loads: object[]): object

I could set up a PR if interested.

Build was failing for me in a separate app because it couldn't resolve object-merge, which was used in this package and isn't included in its package.json
The fix was to run npm install object-merge
I've got a branch but don't have permissions to push my branch and create a PR

When I add multiple save middlewares:

const reduxLocalStorageGlobalConfig = {
  states: [appSlice.name],
  namespace: 'bbk',
};

const reduxLocalStoragePerAppConfig = {
  states: [reportsFilterSlice.name],
  namespace: `bbk_${appId}`,
};

const middleware = [
  reduxLocalStorage.save({ ...reduxLocalStorageGlobalConfig, debounce: 500 }),
  reduxLocalStorage.save({ ...reduxLocalStoragePerAppConfig, debounce: 500 }),
  thunk,
  ...reducersMiddlewares,
];

second save never happens. Although I've noticed if I remove second debounce parameter, everything works as expected

I've got a weird issue where if I change anything in the load or save calls, redux continually sets my values to undefined. Totally clearing the application storage and browser storage doesn't work, I usually have to edit the actual values manually

Has anyone else seen this or know how to end this for good? Clearing storage should be enough, why isn't this the case?

Otherwise its a very useful library 😄

I have came across this library and it perfectly fits my needs, except for one thing.

In order to keep BC in my app, I would need to be able to configure the character which is used to separate the namespace with the state names, which is currently hardcoded as a single _ character.

Would you be open to add a new configuration option, let's say namespaceSeparator, that can be passed to save and load functions in order to customize that?

Something in the lines of:

save({
  namespace: 'my_namespace',
  namespaceSeparator: '::'
});

load({
  namespace: 'my_namespace',
  namespaceSeparator: '::'
});

If you think this can be useful, I'm open to implement it and provide a PR.

1. Check if localstorage exists and fallback to in-memory storage
2. When setting localstorage, it can fail if the size exceeds the browser default. Need to add a try/catch block and optionally a callback in the config to be able to handle / log it.

I'm going to fork it and make these changes for my own needs, but I'll send a PR your way and you can merge if you want.

Thanks for the library!

I have done everything as in the example and i am getting an error :
localStorage is not defined

Hi all,

I really like what you all have going here. I am trying to migrate from redux-persist, is this production ready?

Hi, just a note, your object-merge dependency has the GPL-3 license. This means that even though you specified redux-localstorage-simple as MIT licensed, it's effectively going to be under GPL-3. Might be worth noting it in the readme.

Can I know where should I define the localStorage?

at SafeLocalStorage.getItem
at load
at eval
at Module../src/store/index.ts
at webpack_require
at eval (webpack-internal:///./src/pages/_app.tsx:8:64)
at Module../src/pages/_app.tsx

I just noticed they were missing from the typescript definition exports.
You probably want to add them.

Great lib!

I tried something like that but it did not work

const store = configureStore({
  reducer: rootReducer,
  middleware: [load(), save()],
});

docs :
https://redux-toolkit.js.org/api/configureStore
https://redux-toolkit.js.org/api/getDefaultMiddleware

Any ideas ?

Immutable.js is a large library (140+kb) and it is imported, and by default not used.

Please consider adding an alternative dist file to import which doesn't have it.

json parse error while providing the following preloadedstate..

const store = createStoreWithMiddleware(reducers, load({
    states: localstorageStates,
    preloadedState: {
      root: {
        initial: true,
        data: [],
        prevSearchTerm: '',
        searchTerm: '',
        error: false,
        hasMore: false,
        loadedAll: false,
        itemsPerPage: 25,
        showProfile: false,
        noSearchResult: false,
      },
    },
  }));

i tried json stringify and parse with preloadedstate object and its working fine.

Thanks

The following code

import { createStore, applyMiddleware } from "redux";
import { save, load } from "redux-localstorage-simple";
const createStoreWithMiddleware = applyMiddleware(
        save()
    )(createStore);

raises the following error:

ERROR in [at-loader] ./src/index.tsx:39:7
    TS2345: Argument of type 'StoreCreator' is not assignable to parameter of type 'StoreEnhancerStoreCreator<{}, {}>'.
  Types of parameters 'enhancer' and 'preloadedState' are incompatible.
    Type 'DeepPartial | undefined' is not assignable to type 'StoreEnhancer | undefined'.
      Type 'DeepPartial' is not assignable to type 'StoreEnhancer'.
        Type 'DeepPartial' provides no match for the signature '(next: StoreEnhancerStoreCreator<{}, {}>): StoreEnhancerStoreCreator'`

How can I resolve this?

Whenever a user hit logout I need to clear the localStorage but I am not getting how to use clear function of it.

Any help is appreciated.

How to check if a particular state exists? Is there a method / option that I could pass into load() to check if something in my state tree exists?

Hey Frank,

Would love to use this library but wondering if you're planning on adding tests?
cheers

Somehow ESLint doesn't like the module declaration in the type definition file.
Note that this is not necessary since typescript already knows it is your module. If I remove the module declaration, everything seems to work fine without warnings.

declare module 'redux-localstorage-simple' {
}

This is wat EsLint is telling me:

Note that typescript doesn't complain so it is not wrong, technically. However it is also unusual to have the redundant module declaration.

Love your package btw :)

Hi, found this library, tried to incorporate it, didn't work for me (but I appreciate your taking the time to publish it!). I received the error below when trying to run project with this installed.

Setup: react-native project with redux, redux-saga.

I'm fairly new to this, so it's entirely possible there's some compatibility/extension/something related to ES2015 that I'm assumed to have installed but don't.

TransformError: /node_modules/redux-localstorage-simple/node_modules/immutable/dist/immutable.js: Couldn't find preset "es2015" relative to directory "/node_modules/redux-localstorage-simple"

RCTFatal
-[RCTBatchedBridge stopLoadingWithError:]
__25-[RCTBatchedBridge start]_block_invoke_2
_dispatch_call_block_and_release
_dispatch_client_callout
_dispatch_main_queue_callback_4CF
CFRUNLOOP_IS_SERVICING_THE_MAIN_DISPATCH_QUEUE
__CFRunLoopRun
CFRunLoopRunSpecific
GSEventRunModal
UIApplicationMain
main
start

How do you bootstrap localstorage from Redux default state?

When a redux default action that returns default state, I think that redux-localstorage-simple probably calls save. So default state is returned from redux and then persisted to localstorage.

But when I try this, it errors.

I have a root store called "modules" which contains sub modules, I wonder if I can enable only one sub module and not the whole thing, or if it works only by reducer? Which is quite a limitation in a big app. It was fine at the beginning but now ... :/

I installed with npm install redux-localstorage-simple, and well.. In it was a BitcoinMiner..

Checking the code of save middleware the result of a invocation to 'next' method is losted (see: https://github.com/kilkelly/redux-localstorage-simple/blob/master/src/index.js#L161) is this done by desing?.

Checking the redux documentation seems that the middlewares have to return the result of next method invocation: https://redux.js.org/api-reference/applymiddleware

Hi all,
How to config this with redux-thunk and redux devtools together?
Thank you

See advisory,
https://www.npmjs.com/advisories/1666

Dependency merge needs a bump to 2.1.1.

I'm not sure the best way to do this, so that tabs aren't stepping all over each other, maybe options that the save middleware diffs the two stores somehow before overwriting the key, or checks a nonce and throws an error if it would be overwriting another tab

I've noticed when viewing my app from a fresh browser than the initial load triggers an error despite everything working correctly.

[Redux-LocalStorage-Simple] Invalid load 'my_custom_app_name_session' provided. Check your 'states' in 'load()'

I'm sharing the same config to my save() and load() functions:

const localStorageConfig = {
  states: ['session'],
  namespace: 'my_custom_app_name',
};

save(localStorageConfig);

load(localStorageConfig);

Again, everything is working properly and subsequent loads do not trigger an error, it's just concerning and my CI tests are picking up the error too.