Persist and rehydrate a redux store

Overview

Redux Persist

Persist and rehydrate a redux store.

build status npm version npm downloads

October 15th, 2021 - Move to TypeScript (Thanks @smellman)

As part of the work to upgrade the infrastructure used to build redux-persist, we're moving from Flow to TypeScript.

  • Move from Flow to TypeScript
  • Move from TravisCI to GitHub Actions (.github/workflows/ci.yml)
  • Version updates for some dependencies

September 22nd, 2021 - Under New Management

Redux Persist is a staple project for Redux developers, both on mobile and on the web. If you're here, it's likely because you need it now or have used it before and need to debug something, and like me have possibly struggled with making it work (especially with newer versions of things) and making it work with your code because the examples you'll find around the internet are inconsistent.

I (@ckalika) spoke with @rt2zz about taking over maintenance of the project, and we agreed to give it a shot and see how we go. My priorities are as follows:

  1. Go through and triage the existing issues

    • Separate them into bugs, feature requests, basic questions/requests for code samples, and issues that are either not project-specific or don't fall within the remit of the project (specific definitions and criteria will be posted in the future)
    • Determine the severity/urgency of each bug or feature request
    • Guestimate the size of them
    • Determine which are actionable immediately or in the short term
    • Establish some semblance of test criteria for each
  2. Upgrade dependencies (where possible) so that we've got something building with modern versions

    • Note: Right now, it's about modernising the project infrastructure and build process without making breaking API changes
  3. Go through the existing pull requests

    • Merge the ones that deal with documentation, code samples, etc.
    • Review and merge the ones that deal with open issues
    • Review and merge the ones that will require breaking changes and consult authors about redux-persist@v7 (feature set and requirements to be defined)
  4. Update the documentation

    • Split it out for both web and mobile
    • Providing code samples and test coverage for how to use the library
    • Provide or link to working examples that integrate with additional libraries (e.g. RTK Query).
  5. Improve testing and automation

    • Move to GitHub Actions
    • Move from Ava to Jest

There's a lot to do here, so I'll ask your patience and understanding as I work through it. If you have ideas for how to improve the library, the documentation, or the community, I'd love to hear them, and if you're submitting pull requests (or have submitted some previously), please reach out and help me understand what you're aiming to do with it.

I'll try to get some discussions up to pull together ideas, so we can properly work out what the next version is likely to look like.

v6 upgrade

Web: no breaking changes React Native: Users must now explicitly pass their storage engine in. e.g.

import AsyncStorage from '@react-native-async-storage/async-storage';

const persistConfig = {
  //...
  storage: AsyncStorage
}

Quickstart

npm install redux-persist

Usage Examples:

  1. Basic Usage
  2. Nested Persists
  3. Hot Module Replacement
  4. Code Splitting [coming soon]

Basic Usage

Basic usage involves adding persistReducer and persistStore to your setup. IMPORTANT Every app needs to decide how many levels of state they want to "merge". The default is 1 level. Please read through the state reconciler docs for more information.

// configureStore.js

import { createStore } from 'redux'
import { persistStore, persistReducer } from 'redux-persist'
import storage from 'redux-persist/lib/storage' // defaults to localStorage for web

import rootReducer from './reducers'

const persistConfig = {
  key: 'root',
  storage,
}

const persistedReducer = persistReducer(persistConfig, rootReducer)

export default () => {
  let store = createStore(persistedReducer)
  let persistor = persistStore(store)
  return { store, persistor }
}

If you are using react, wrap your root component with PersistGate. This delays the rendering of your app's UI until your persisted state has been retrieved and saved to redux. NOTE the PersistGate loading prop can be null, or any react instance, e.g. loading={ }

import { PersistGate } from 'redux-persist/integration/react'

// ... normal setup, create store and persistor, import components etc.

const App = () => {
  return (
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <RootComponent />
      </PersistGate>
    </Provider>
  );
};

API

Full API

persistReducer(config, reducer)

  • arguments
    • config object
      • required config: key, storage
      • notable other config: whitelist, blacklist, version, stateReconciler, debug
    • reducer function
      • any reducer will work, typically this would be the top level reducer returned by combineReducers
  • returns an enhanced reducer

persistStore(store, [config, callback])

  • arguments
    • store redux store The store to be persisted.
    • config object (typically null)
      • If you want to avoid that the persistence starts immediately after calling persistStore, set the option manualPersist. Example: { manualPersist: true } Persistence can then be started at any point with persistor.persist(). You usually want to do this if your storage is not ready when the persistStore call is made.
    • callback function will be called after rehydration is finished.
  • returns persistor object

persistor object

  • the persistor object is returned by persistStore with the following methods:
    • .purge()
      • purges state from disk and returns a promise
    • .flush()
      • immediately writes all pending state to disk and returns a promise
    • .pause()
      • pauses persistence
    • .persist()
      • resumes persistence

State Reconciler

State reconcilers define how incoming state is merged in with initial state. It is critical to choose the right state reconciler for your state. There are three options that ship out of the box, let's look at how each operates:

  1. hardSet (import hardSet from 'redux-persist/lib/stateReconciler/hardSet') This will hard set incoming state. This can be desirable in some cases where persistReducer is nested deeper in your reducer tree, or if you do not rely on initialState in your reducer.
    • incoming state: { foo: incomingFoo }
    • initial state: { foo: initialFoo, bar: initialBar }
    • reconciled state: { foo: incomingFoo } // note bar has been dropped
  2. autoMergeLevel1 (default) This will auto merge one level deep. Auto merge means if the some piece of substate was modified by your reducer during the REHYDRATE action, it will skip this piece of state. Level 1 means it will shallow merge 1 level deep.
    • incoming state: { foo: incomingFoo }
    • initial state: { foo: initialFoo, bar: initialBar }
    • reconciled state: { foo: incomingFoo, bar: initialBar } // note incomingFoo overwrites initialFoo
  3. autoMergeLevel2 (import autoMergeLevel2 from 'redux-persist/lib/stateReconciler/autoMergeLevel2') This acts just like autoMergeLevel1, except it shallow merges two levels
    • incoming state: { foo: incomingFoo }
    • initial state: { foo: initialFoo, bar: initialBar }
    • reconciled state: { foo: mergedFoo, bar: initialBar } // note: initialFoo and incomingFoo are shallow merged

Example

import hardSet from 'redux-persist/lib/stateReconciler/hardSet'

const persistConfig = {
  key: 'root',
  storage,
  stateReconciler: hardSet,
}

React Integration

Redux persist ships with react integration as a convenience. The PersistGate component is the recommended way to delay rendering until persistence is complete. It works in one of two modes:

  1. loading prop: The provided loading value will be rendered until persistence is complete at which point children will be rendered.
  2. function children: The function will be invoked with a single bootstrapped argument. When bootstrapped is true, persistence is complete and it is safe to render the full app. This can be useful for adding transition animations.

Blacklist & Whitelist

By Example:

// BLACKLIST
const persistConfig = {
  key: 'root',
  storage: storage,
  blacklist: ['navigation'] // navigation will not be persisted
};

// WHITELIST
const persistConfig = {
  key: 'root',
  storage: storage,
  whitelist: ['navigation'] // only navigation will be persisted
};

Nested Persists

Nested persist can be useful for including different storage adapters, code splitting, or deep filtering. For example while blacklist and whitelist only work one level deep, but we can use a nested persist to blacklist a deeper value:

import { combineReducers } from 'redux'
import { persistReducer } from 'redux-persist'
import storage from 'redux-persist/lib/storage'

import { authReducer, otherReducer } from './reducers'

const rootPersistConfig = {
  key: 'root',
  storage: storage,
  blacklist: ['auth']
}

const authPersistConfig = {
  key: 'auth',
  storage: storage,
  blacklist: ['somethingTemporary']
}

const rootReducer = combineReducers({
  auth: persistReducer(authPersistConfig, authReducer),
  other: otherReducer,
})

export default persistReducer(rootPersistConfig, rootReducer)

Migrations

persistReducer has a general purpose "migrate" config which will be called after getting stored state but before actually reconciling with the reducer. It can be any function which takes state as an argument and returns a promise to return a new state object.

Redux Persist ships with createMigrate, which helps create a synchronous migration for moving from any version of stored state to the current state version. [Additional information]

Transforms

Transforms allow you to customize the state object that gets persisted and rehydrated.

There are several libraries that tackle some common implementations for transforms.

  • immutable - support immutable reducers
  • seamless-immutable - support seamless-immutable reducers
  • compress - compress your serialized state with lz-string
  • encrypt - encrypt your serialized state with AES
  • filter - store or load a subset of your state
  • filter-immutable - store or load a subset of your state with support for immutablejs
  • expire - expire a specific subset of your state based on a property
  • expire-reducer - more flexible alternative to expire transformer above with more options

When the state object gets persisted, it first gets serialized with JSON.stringify(). If parts of your state object are not mappable to JSON objects, the serialization process may transform these parts of your state in unexpected ways. For example, the javascript Set type does not exist in JSON. When you try to serialize a Set via JSON.stringify(), it gets converted to an empty object. Probably not what you want.

Below is a Transform that successfully persists a Set property, which simply converts it to an array and back. In this way, the Set gets converted to an Array, which is a recognized data structure in JSON. When pulled out of the persisted store, the array gets converted back to a Set before being saved to the redux store.

import { createTransform } from 'redux-persist';

const SetTransform = createTransform(
  // transform state on its way to being serialized and persisted.
  (inboundState, key) => {
    // convert mySet to an Array.
    return { ...inboundState, mySet: [...inboundState.mySet] };
  },
  // transform state being rehydrated
  (outboundState, key) => {
    // convert mySet back to a Set.
    return { ...outboundState, mySet: new Set(outboundState.mySet) };
  },
  // define which reducers this transform gets called for.
  { whitelist: ['someReducer'] }
);

export default SetTransform;

The createTransform function takes three parameters.

  1. An "inbound" function that gets called right before state is persisted (optional).
  2. An "outbound" function that gets called right before state is rehydrated (optional).
  3. A config object that determines which keys in your state will be transformed (by default no keys are transformed).

In order to take effect transforms need to be added to a PersistReducer’s config object.

import storage from 'redux-persist/lib/storage';
import { SetTransform } from './transforms';

const persistConfig = {
  key: 'root',
  storage: storage,
  transforms: [SetTransform]
};

Storage Engines

Community & Contributing

I will be updating this section shortly. If you have a pull request that you've got outstanding, please reach out and I will try to review it and get it integrated. As we've shifted to TypeScript, that may necessitate some changes, but I'm happy to help in that regard, wherever I can.

Comments
  • Getting error redux-persist: rehydrate for

    Getting error redux-persist: rehydrate for "root" called after timeout

    redux-persist: rehydrate for "root" called after timeout., Object {
      "INITIALIZING": true,
      "_persist": Object {
        "rehydrated": true,
        "version": -1,
      },
      "user": null,
    }, undefined
    - node_modules/redux-persist/lib/persistReducer.js:92:59 in _rehydrate
    - ... 13 more stack frames from framework internals
    

    I am using expo sdk version 25 My code is as below

    reducers.js

    export default (
      state = {
        INITIALIZING: true,
        user: null
      },
      action
    ) => {
      switch (action.type) {
        default:
          return state;
      }
    };
    

    configureStore.js

    import { createStore } from 'redux';
    import { persistStore, persistReducer } from 'redux-persist';
    import storage from 'redux-persist/lib/storage';
    
    import rootReducer from './reducers';
    
    const persistConfig = {
      key: 'root',
      storage
    };
    
    const persistedReducer = persistReducer(persistConfig, rootReducer);
    
    export default () => {
      let store = createStore(persistedReducer);
      let persistor = persistStore(store);
      return { store, persistor };
    };
    
    

    App.js

    import React from 'react';
    import { StyleSheet, Text, ActivityIndicator, View } from 'react-native';
    import * as firebase from 'firebase';
    import { PersistGate } from 'redux-persist/integration/react';
    import { firebaseConfig } from './src/config';
    import { Provider } from 'react-redux';
    import configureStore from './src/configureStore';
    import styled from 'styled-components';
    // import Main from './src/screens/Main';
    const { store, persistor } = configureStore();
    firebase.initializeApp(firebaseConfig);
    
    const StyledLoaderContainer = styled.View`
      justify-content: center;
      align-items: center;
      margin-top: 100px;
    `;
    
    const Loading = () => (
      <StyledLoaderContainer>
        <ActivityIndicator />
        <Text>Initializing...</Text>
      </StyledLoaderContainer>
    );
    
    export default class App extends React.Component {
      render() {
        return (
          <Provider store={store}>
            <PersistGate loading={<Loading />} persistor={persistor}>
              <View>
                <Text>This is root</Text>
              </View>
            </PersistGate>
          </Provider>
        );
      }
    }
    
    const styles = StyleSheet.create({
      container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center'
      }
    });
    
    opened by ajaymore 99
  • redux-persist is not working

    redux-persist is not working

    I followed doc here for setup --> https://github.com/rt2zz/redux-persist

    Basically I've simple basic setup as per the document

    import { createStore } from 'redux'
    import { persistStore, persistReducer } from 'redux-persist'
    import storage from 'redux-persist/lib/storage'
    import user from './reducers/user';
    
    const persistConfig = {
      key: 'root',
      storage,
    }
    
    const rootReducer = combineReducers({user: user});
    
    const persistedReducer = persistReducer(persistConfig, rootReducer);
    
    const store = createStore(persistedReducer, applyMiddleware(thunk));
    
    const persistor = persistStore(store);
    
    export { store, persistor } ;
    

    And then, I add PersistGate in my render.

    ReactDOM.render(
      <Provider store={store}>
        <PersistGate loading={null} persistor={persistor} >
          <RootRouter />
        </PersistGate>
      </Provider> ,
      document.getElementById('root')
    );
    

    But still when I refresh my page, it doesn't keep those states active. The only difference I can see in my code (than document) is that I'm using thunk. Can someone please help me?

    usability 
    opened by vicky-blr 33
  • Need an example

    Need an example

    I'm completely new to redux. I want to persist the state can anyone please give some good example how to persist the state and also per reducer. I saw some examples in closed issues but it was not clear for me. Thank you.

    opened by damamsrinivas 29
  • Is this library still maintained?

    Is this library still maintained?

    If not, does anyone have any alternatives they would suggest?

    perhaps the maintainer could also do one final commit to update the readme letting people know it's no longer being actively developed.

    opened by RyanWarner 27
  • non-serializable value error

    non-serializable value error

    Hi folks 👋,

    I just installed the redux-persist in a project still in its early stages and I'm facing this error message in the console as first thing when the page loads. I haven't done much besides including the lib as is, and my reducers are pretty simple for now, so I believe it has something to do with redux-persist itself?

    Error:

    index.js:1446 A non-serializable value was detected in an action, in the path: `register`. Value: ƒ register(key) {
        _pStore.dispatch({
          type: _constants__WEBPACK_IMPORTED_MODULE_2__["REGISTER"],
          key: key
        });
      }
    

    Code above is followed by this message:

    • Take a look at the logic that dispatched this action: {type: "persist/PERSIST", register: ƒ, rehydrate: ƒ}...
    • (See https://redux.js.org/faq/actions#why-should-type-be-a-string-or-at-least-serializable-why-should-my-action-types-be-constants)

    SS of the whole thing: image

    Could anyone help me pointing me in the right direction? It does not break the application, but the error message is there in the console.

    Cheers,

    opened by rseemann 24
  • Delay Render Until Rehydration Complete

    Delay Render Until Rehydration Complete

    In the recipe for delay render, it's pretty straightforward if persistStore is called in the same file that you're rendering in. However, my rendering happens in a different component. Is there a straight forward way to notify a separate component that rehydration has completed?

    opened by moughxyz 24
  • Having Rehydrated values passed in the store's initialState

    Having Rehydrated values passed in the store's initialState

    I still looking into it, but it would be great to achieve. Now the reducers are initiated twice: the first one with the initial value, and the second - with the rehydrated one. I tried to find some solutions, but all of them seems to be antipattern, except of this. Actually, this is the purpose of the store's initialState to pass the rehydrating state from server or localStorage. What do you think if we get the data from the localStorage before creating the store?

    opened by zalmoxisus 22
  • typescript incompatible with latest version of redux-persist

    typescript incompatible with latest version of redux-persist

    Versions: TS: 2.7.1 redux-persist: 5.6.5

    All of the sub directory imports are not possible when using typescript with redux-persist. Example:

    import storage from 'redux-persist/lib/storage'
    // error:
    [ts]
    Could not find a declaration file for module 'redux-persist/lib/storage'. '.../node_modules/redux-persist/lib/storage/index.js' implicitly has an 'any' type.
      Try `npm install @types/redux-persist` if it exists or add a new declaration (.d.ts) file containing `declare module 'redux-persist';`
    
    opened by ch1ll0ut1 18
  • Allow for any type of root level state

    Allow for any type of root level state

    This addresses issue (#64), when you have an immutable object as the root state.

    The redux-persist-immutable-state package provides the functions for actually iterating over an immutable root state as well as getting and setting keys.

    Usage of redux-persist-immutable-state:

    import { stateIterator, stateGetter, stateSetter, 
             stateReconciler, lastStateInit } from 'redux-persist-immutable-state';
    
    persistStore(state, {
      transforms: [reduxPersistImmutable], 
      stateIterator: stateIterator,  
      stateGetter: stateGetter, stateSetter: stateSetter,
      lastStateInit: lastStateInit
    })
    

    I've spent some time benchmarking the persisting of new data on state changes, as well as rehydrating the state from localStorage. Here are the results: chart

    The skeleton around those benchmarks is here: https://github.com/rufman/benchmark-redux-persist If you want to run the tests yourself just clone https://github.com/rufman/redux-persist into the lib directory of benchmark-redux-persist and run webpack. Then open index.html and run the tests.

    opened by rufman 18
  • [V5] How to purge when I want to clear the storage cache in ReactNative?

    [V5] How to purge when I want to clear the storage cache in ReactNative?

    Hi rt2zz~ I want to click one button to clear the storage cache in ReactNative, I used PersistGate but I don't know how to invoke the purge method in the RN component. Could you please explain how to invoke purge method when the onPress event occurs?Thx a lot!! The code is as following: import * as React from 'react'; import { Provider } from 'react-redux'; import { PersistGate } from 'redux-persist/es/integration/react';

    import IntlComponent from './IntlComponent'; import configureStore from './middlewares';

    import {View,Text} from 'react-native';

    const { persistor, store } = configureStore(); const onBeforeLift = () => { // take some action before the gate lifts }

    export default class App extends React.Component { render() { return <Provider store={store}> <PersistGate onBeforeLift={onBeforeLift} persistor={persistor} loading={}> } }

    opened by landpy 17
  • Persisting Javascript Date objects

    Persisting Javascript Date objects

    Hey guys, I'm trying to persist a Javascript Date object in the redux store, but it seems to be serializing into a string automatically, without being deserialized upon rehydration. Right now I can handle it with a transform (although it's a little messy), I feel like this should be default behavior, what do you guys think?

    At the very least we could put a warning when persisting and then rehydrating gives you back a different object.

    stale 
    opened by MichaelDanielTom 17
  • Changes to the store are not applying

    Changes to the store are not applying

    I am changing some things in the reducer yet the changes are not visible. The previous reducer persists. Eventhough I reset my application my changes to the reducer never apply.

    This is mi store.js, where I set the redux persist configuration:

    import { configureStore } from '@reduxjs/toolkit';
    import { FLUSH, PAUSE, PERSIST, persistReducer, persistStore, PURGE, REGISTER, REHYDRATE } from 'redux-persist';
    import { combineReducers } from 'redux';
    import AsyncStorage from '@react-native-async-storage/async-storage';
    
    //Reducers
    import loaderReducer from './loader';
    import userReducer from './user';
    import dataSlice from './data';
    
    const rootReducer = combineReducers({loader: loaderReducer, userInfo: userReducer, data: dataSlice});
    
    //Persist Config
    
    const persistConfig = {
      key: 'root',
      version: 11, //Increment this value to reset the storage
      storage: AsyncStorage,
      blacklist: ['sedes'], //No se persisten estos reducers
    };
    
    const persistedReducer = persistReducer(persistConfig, rootReducer);
    
    const store = configureStore({  
      reducer: persistedReducer, 
      middleware: getDefaultMiddleware => getDefaultMiddleware({
        inmutableCheck: {warnAfter: 123}, 
        serializableCheck: {
          ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER], //No se chequean estos tipos de acciones
          warnAfter: 124,
        } 
      })});
    
    export const persistor = persistStore(store);
    export default store;
    

    and this is an example of a store:

    import { createSlice } from "@reduxjs/toolkit";
    
    const initialState = {
        load: false
    }
    
    export const loaderSlice = createSlice({
        name: "loader",
        initialState,
        reducers: {
            setLoader: (state, action) => {
                state.load = action.payload;
            }
        }
    })
    
    export const {setLoader} = loaderSlice.actions
    
    export default loaderSlice.reducer
    

    I am changing the version in the persistConfig (as this was an error I had in a previous proyect) yet there is no change at all. I am thinking maybe I am missing some import or importing something wrongly. Asi this EXACT configuration works perfectly in another proyect (maybe because I had a lower version of redux-persist)

    opened by rochijacob 0
  • Improve documentation on `createTransform()`

    Improve documentation on `createTransform()`

    In current documentation about createTransform() it unclear inboundState and outboundState parameters are full redux states to be serialized/deserialized or a value of a field of the state:

    import { createTransform } from 'redux-persist';
    
    const SetTransform = createTransform(
      // transform state on its way to being serialized and persisted.
      (inboundState, key) => {
        // convert mySet to an Array.
        return { ...inboundState, mySet: [...inboundState.mySet] };
      },
      // transform state being rehydrated
      (outboundState, key) => {
        // convert mySet back to a Set.
        return { ...outboundState, mySet: new Set(outboundState.mySet) };
      },
      // define which reducers this transform gets called for.
      { whitelist: ['someReducer'] }
    );
    
    export default SetTransform;
    

    As it turns out, each function has signature (fieldValue, key, state) => newValue. I think the documentation should describe all three parameters. I can submit PR later

    opened by azerum 0
  • Wiki: Should this repository Wiki be editable by collaborators only?

    Wiki: Should this repository Wiki be editable by collaborators only?

    It seems anyone on the internet can write to this repo's wiki.

    @rt2zz should probably restrict to collaborators only. Or maybe not? :) Anyhow, just thought I'd confirm if this was intentional.

    https://github.com/rt2zz/redux-persist/wiki

    opened by kishannareshpal 0
  • [Feature Request]: Auto merge deeper than level 2

    [Feature Request]: Auto merge deeper than level 2

    There's autoMergeLevel1 and autoMergeLevel2 apis, but It'd be great if there's Level3 and 4 etc. I'm already using autoMergeLevel2 but it wouldn't merge anything that's nested more than 3 levels. for instance, this is my store

    user: {
      something: {
        anything: {
              ...,
              hello: []      <--- this will not be merged
          }
      }
    }
    
    opened by SeongwoonHong 1
Releases(v6.0.0)
  • v6.0.0(Sep 2, 2019)

    • BREAKING: no longer automatically use AsyncStorage from react-native, instead supply your storage of choice explicitly. In most cases this will be https://github.com/react-native-community/async-storage
    • upgrade all deps b9547b6
    • improved typescript definitions
    Source code(tar.gz)
    Source code(zip)
  • v6.0.0-pre2.0(Jul 5, 2019)

    • Add an option to delay the automatic persistence. (#986) 7bbf971
    • Update createPersistoid.js (#803) 5a5f463
    • Add expire redux-persist-expire transformer (#901) 4e40283
    • add link to redux-persist-pouchdb (#1055) 6f4a81e
    • fix(persistReducer): Ensure nested reducers can handle PERSIST too. Fixes #940 (#1048) 5ad36b8

    https://github.com/rt2zz/redux-persist/compare/v6.0.0-pre2...v6.0.0-pre2.0

    Source code(tar.gz)
    Source code(zip)
  • v6.0.0-pre1(May 7, 2019)

    The breaking change is that we no longer allow react-native users to import out of redux-persist/lib/storage. Instead use import AsyncStorage from '@react-native-community/async-storage'

    Changelog to come

    Source code(tar.gz)
    Source code(zip)
  • v5.7.0(Feb 10, 2018)

    This release adds a timeout config. This will hopefully ease some of the pain on react native android caused by occasional AsyncStorage unresolved promises.

    Changelog

    • add timeout config to persistReducer config, default to 5000 ms
    Source code(tar.gz)
    Source code(zip)
  • v5.6.5(Feb 1, 2018)

    This release includes a number of improvements. Notably:

    1. transforms now have access to a third argument of the "full state"
    2. persisted state now updates immediately after rehydration rather than waiting for a subsequent action to persist
    3. persisted reducers now passthrough if the base reducer does not modify state (performance fix)
    4. fix hardSet issue when inbound state is undefined (state is now only reconciled if inbound state is defined)

    Changelog

    • (persistReducer): only reconciler defined state (#698)
    • (general): bump deps, cleanup, prettierrc (#694) 0cab4f0
    • (createTransform) Give transformers access to the full state (i.e., across all available keys) (#682) 0db73d3
    • (types): flow fixes (#692) de1dbcf
    • (test): use memory storage in tests (#691) 58e14d6
    • (docs): Update README with redux-persist-expo-securestore (#678) b357b7f
    • (persistReducer): return unmodified state if possible (#689) 96525fb
    • (persistReducer): update persistoid on rehydrate (#688) f89d60b
    • (docs): Update v4 link (#684) 21cbb5e
    • (test) switch to storage-memory module (#683) f1ef085
    • (docs): fix typo (#665) 2cb1a15
    • (docs) update stateReconciler import (#666) 26109c0
    Source code(tar.gz)
    Source code(zip)
  • v5.4.0(Nov 19, 2017)

  • v4.6.0(Apr 2, 2017)

    • simplify process.env.NODE_ENV access
      • now does not trigger webpack polyfill
      • now works with standard envify solutions
    • remove process.nextTick in favor of setImmediate
    Source code(tar.gz)
    Source code(zip)
  • v4.0.0(Jan 20, 2017)

    Breaking Changes

    • https://github.com/rt2zz/redux-persist/commit/25f2f0648ba34c85283d2e5051232c83f996d056]liftReducer with autorehydrate (fix bug with hmr, non-hmr users should be unaffected)
    • https://github.com/rt2zz/redux-persist/commit/5aef897bcb11cb8cfef7b2178bc8678aad1f4105 remove purgeAll(), purge all now default behavior of purge()
    • https://github.com/rt2zz/redux-persist/commit/178689972f432c225329bbc180be44b52fa86292 config.serialize is now a boolean option instead of a function. custom serialize function can still be achieved via transform.

    New features

    • https://github.com/rt2zz/redux-persist/commit/8a65894ad9c18c290e073e67d7c5f3c6bd170f97 umd & es builds! @marvinhagemeister
    • https://github.com/rt2zz/redux-persist/commit/3e1b0d4f91832af3abcdcc09fa2b0f22600640aa better localForage support! @willmcclellan
    • https://github.com/rt2zz/redux-persist/commit/89ee3291717140858c4fdde70a248c27ce0bca95 more comprehensive localStorage checks! @IanVS
    • https://github.com/rt2zz/redux-persist/commit/349a0b08cf7e4a235b17cd50cf3ffd62ed3fb7dc typescript defs! @morlay
    • https://github.com/rt2zz/redux-persist/commit/e9503e39315118587268589f62a4d979ba9c81fe flowtype defs! @gnoff
    Source code(tar.gz)
    Source code(zip)
  • v1.5.3(Feb 12, 2016)

  • v1.2.0(Oct 24, 2015)

    autoRehydrate had two bugs: 1: actionsBuffer was not working 2: object equality for reducer sub states was preserved (wrongly) upon auto rehydration.

    Source code(tar.gz)
    Source code(zip)
Owner
Zack Story
Zack Story
A Higher Order Component using react-redux to keep form state in a Redux store

redux-form You build great forms, but do you know HOW users use your forms? Find out with Form Nerd! Professional analytics from the creator of Redux

Redux Form 12.6k Jan 3, 2023
A mock store for testing Redux async action creators and middleware.

redux-mock-store A mock store for testing Redux async action creators and middleware. The mock store will create an array of dispatched actions which

Redux 2.5k Jan 1, 2023
React with Redux, action, dispatch, reducer, store setup and guide

This Project has Snippets for react with redux steup, process and how to implemenntation details src->components->HomeButtons has old approach src->co

Mohib Khan 1 Nov 22, 2021
Redux Tutorial - share my experience regarding redux, react-redux and redux-toolkit

Redux Tutorial 1. Introduction to Redux 1.1 What is Redux & why Redux? A small JS Library for managing medium/large amount of states globally in your

Anisul Islam 36 Dec 29, 2022
Redux Bucheli Course Strategies Passing Store Data Through The Top Level React Component

Redux Bucheli Course Strategies Passing Store Data Through The Top Level React Component

ANDRÉS R. BUCHELI (Andrés F. Regalado Bucheli) 1 Jan 22, 2022
A simple app for study react with redux, redux saga and typescript.

React com Redux, Redux-Saga e TypeScript. ?? Uma aplicação simple para entender o funcionamento do Redux e a melhor maneira de utiliza-lo junto com o

João Marcos Belanga 1 May 24, 2022
Redux - Create forms using Redux And React

Exercício de fixação Vamos criar formulários utilizando Redux! \o/ Antes de inic

Márcio Júnior 2 Jul 21, 2022
A lightweight state management library for react inspired by redux and react-redux

A lightweight state management library for react inspired by redux and react-redux

null 2 Sep 9, 2022
redux-immutable is used to create an equivalent function of Redux combineReducers that works with Immutable.js state.

redux-immutable redux-immutable is used to create an equivalent function of Redux combineReducers that works with Immutable.js state. When Redux creat

Gajus Kuizinas 1.9k Dec 30, 2022
A chart monitor for Redux DevTools https://www.npmjs.com/package/redux-devtools-chart-monitor

Redux DevTools Chart Monitor This package was merged into redux-devtools monorepo. Please refer to that repository for the latest updates, issues and

Redux 293 Nov 13, 2022
DevTools for Redux with hot reloading, action replay, and customizable UI

Redux DevTools Developer Tools to power-up Redux development workflow or any other architecture which handles the state change (see integrations). It

Redux 13.3k Jan 2, 2023
Ruthlessly simple bindings to keep react-router and redux in sync

Project Deprecated This project is no longer maintained. For your Redux <-> Router syncing needs with React Router 4+, please see one of these librari

React Community 7.9k Dec 30, 2022
An i18n solution for React/Redux and React Native projects

redux-react-i18n An i18n solution with plural forms support for Redux/React Workers of all countries, unite! Supported languages list with expected co

Dmitry Erzunov 64 Oct 19, 2022
A resizable and movable dock for Redux DevTools monitors

Redux DevTools Dock Monitor A resizable and movable dock for Redux DevTools. Powered by React Dock. Installation npm install --save-dev redux-devtools

Dan Abramov 402 Nov 10, 2022
DevTools for Redux with hot reloading, action replay, and customizable UI

Redux DevTools Developer Tools to power-up Redux development workflow or any other architecture which handles the state change (see integrations). It

Redux 13.3k Jan 1, 2023
Front-end of the movie application created with React.js and Redux

# Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run:

Bibi 6 Aug 21, 2021
This command line helps you create components, pages and even redux implementation for your react project

react-help-create This command line helps you create components, pages and even redux implementation for your react project. How to install it? To ins

Omar 27 Dec 10, 2022
Single page application for tracking cryptocurrencies. Includes sorting, animations, graphs and more. Made using React & Redux.

Crypto Tracker A single page application meant to keep track of the most popular crypto currencies status. The user can sort the coins by highest gain

Robert Baiesita 17 Dec 18, 2022
Redux Implementation using ReactJS and JSON placeholder API

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Siddheshwar Panda 1 Oct 26, 2021