Skip to content

Commit

Permalink
(api): proxy modules, some cleanup (rt2zz#703)
Browse files Browse the repository at this point in the history
* (api): proxy modules, some cleanup

* Update README.md
  • Loading branch information
rt2zz committed Feb 4, 2018
1 parent a40e4a5 commit f8f65dc
Show file tree
Hide file tree
Showing 5 changed files with 39 additions and 70 deletions.
68 changes: 27 additions & 41 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,6 @@ Persist and rehydrate a redux store.

[![build status](https://img.shields.io/travis/rt2zz/redux-persist/master.svg?style=flat-square)](https://travis-ci.org/rt2zz/redux-persist) [![npm version](https://img.shields.io/npm/v/redux-persist.svg?style=flat-square)](https://www.npmjs.com/package/redux-persist) [![npm downloads](https://img.shields.io/npm/dm/redux-persist.svg?style=flat-square)](https://www.npmjs.com/package/redux-persist)

Redux Persist takes your redux state object and saves it to persisted storage. On app launch, it retrieves this persisted state and saves it back to redux.

**Note:** These instructions are for redux-persist v5. For a list of breaking changes between v4 and v5, see our [migration guide](./docs/MigrationGuide-v5.md).
[v4](https://github.com/rt2zz/redux-persist/tree/v4) will be supported for the forseeable future, and if it works well for your use case you are encouraged to stay on v4.

## Quickstart
`npm install redux-persist`

Expand All @@ -26,13 +21,13 @@ Basic usage involves adding `persistReducer` and `persistStore` to your setup. *

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

import rootReducer from './reducers'

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

const persistedReducer = persistReducer(persistConfig, rootReducer)
Expand All @@ -47,15 +42,9 @@ export default () => {
If you are using react, wrap your root component with [PersistGate](./docs/PersistGate.md). 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={<Loading />}`

```js
import React from 'react'
import { Provider } from 'react-redux'
import { PersistGate } from 'redux-persist/lib/integration/react'

import configureStore from './store/configureStore'
let { store, persistor } = configureStore()
import { PersistGate } from 'redux-persist/integration/react'

// import your necessary custom components.
import { RootComponent } from './components'
// ... normal setup, create store and persistor, import components etc.

const App = () => {
return (
Expand All @@ -66,8 +55,6 @@ const App = () => {
</Provider>
);
};

export default App
```

## API
Expand All @@ -91,33 +78,33 @@ export default App

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

## State Reconciler
State reconcilers define how incoming persisted state is merged in with existing default state. It is critical to choose the right state reconciler for your state shape. There are three options that ship out of the box, lets look at how each operates:
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, lets look at how each operates:

1. hardSet (`import hardSet from 'redux-persist/lib/stateReconciler/hardSet'`)
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)
- **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 }`
3. autoMergeLevel2
- **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 }`
- **incoming state**: `{ foo: incomingFoo }`
- **initial state**: `{ foo: initialFoo, bar: initialBar }`
- **reconciled state**: `{ foo: mergedFoo, bar: initialBar }` // note: initialFoo and incomingFoo are shallow merged

#### Example
```js
Expand Down Expand Up @@ -149,7 +136,7 @@ const persistConfig = {
```

## Nested Persists
Nested persist can be useful for a variety of reasons including different storage adapters, code splitting, or deep filtering. For example blacklist and whitelist only work one level deep, but we can use a nested persist to blacklist a deep value:
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:
```js
import { combineReducers } from 'redux'
import { persistReducer } from 'redux-persist'
Expand Down Expand Up @@ -183,7 +170,6 @@ export default persistReducer(rootPersistConfig, rootReducer)
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]](./docs/migrations.md)

## Transforms

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

There are several libraries that tackle some of the common implementations for transforms.
Expand Down Expand Up @@ -216,14 +202,14 @@ const myTransform = createTransform(
```

The createTransform function takes three parameters.
1. A function that gets called right before state is persisted.
2. A function that gets called right before state is rehydrated.
3. A config object.
1. An "inbound" function that gets called right before state is persisted.
2. An "outbound" function that gets called right before state is rehydrated.
3. Config.

## Storage Engines
- **localStorage** `import storage from 'redux-persist/lib/storage'`
- **sessionStorage** `import sessionStorage from 'redux-persist/lib/storage/session'`
- **AsyncStorage** react-native `import storage from 'redux-persist/lib/storage'`
- **sessionStorage** `import storageSession from 'redux-persist/lib/storage/session'`
- **AsyncStorage** react-native `import { AsyncStorage } from 'react-native'`
- **[localForage](https://github.com/mozilla/localForage)** recommended for web
- **[electron storage](https://github.com/psperber/redux-persist-electron-storage)** Electron support via [electron store](https://github.com/sindresorhus/electron-store)
- **[redux-persist-filesystem-storage](https://github.com/robwalkerco/redux-persist-filesystem-storage)** react-native, to mitigate storage size limitations in android ([#199](https://github.com/rt2zz/redux-persist/issues/199), [#284](https://github.com/rt2zz/redux-persist/issues/284))
Expand Down
4 changes: 4 additions & 0 deletions integration/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
Proxy package to enable
```js
import { PersistGate } from 'redux-persist/integration/react'
```
7 changes: 7 additions & 0 deletions integration/react/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"name": "redux-persist/integration/react",
"private": true,
"main": "../../lib/integration/react",
"module": "../../es/integration/react",
"jsnext:main": "../../es/integration/react"
}
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
},
"lint-staged": {
"src/**/*.js": [
"prettier --no-semi --single-quote --trailing-comma --parser=flow --write",
"prettier --write",
"git add"
]
},
Expand Down
28 changes: 0 additions & 28 deletions src/utils/curry.js

This file was deleted.

0 comments on commit f8f65dc

Please sign in to comment.