@abradley2/redux-dev-state-persist 中文文档教程

发布于 7年前 浏览 27 项目主页 更新于 3年前

Redux Dev State Persist

Redux Dev State Persist (RDSP) 无需使用任何类型的 Browserify 或 Webpack 插件 - 并且不涉及特定的热重载集成 API。 只要坚持你的状态!

Installation

npm install --save-dev @abradley2/redux-dev-state-persist

Motivation

使用 Redux 时,“热重载”功能真正需要的一切 是在重新加载之间保存商店的状态。 这个模块正是这样做的。

它使用 localforage 作为持久化引擎,默认为 indexedDB 如果可供使用的话。 所以如果你想清除你的状态,你可以使用你的 浏览器开发工具和清除 indexedDB

智能状态重载
持久性重新加载旧状态时非常烦人 即使您已经更改了商店的初始状态。 RDSP 将 如果检测到,自动刷新您的重新加载状态而不是覆盖 您已经更改了商店的初始状态。 如果你把你的 模块之间的状态,这是基于每个模块的。

Usage

通过提供命名空间来启动 RDSP 以保持故事(“myReduxAppState”或其他) 作为第二个参数,你的 Redux 商店。

初始化返回一个在完成时解析的承诺,或者您可以提供一个 回调作为最后一个参数。 确保你没有在开始和结束之间发送任何东西 的初始化。

const rdsp = require('redux-dev-state-persist')
const store = require('./store')
const ReactDOM = require('react-dom')
const App = require('./App')

const startApp = () => ReactDOM.render(<App />, document.body)

rdsp('myReduxAppState', store)
  .then(startApp)
  .catch(err => {
    console.error('some error loading state!')
    startApp()
  })

Caveats

您存储的状态应该完全可序列化为 JSON。

Redux 在技术上允许你将任何东西添加到你的商店中——甚至是对象 不能序列化为 JSON。 这将以不同的方式保留在 indexedDB 比你的商店,这是不可取的行为。

Production

您可能不想在生产中使用它,所以我建议 有条件地将 RDSP 分配给空的 Promise 解析函数

const persistStore = () => proces.env.NODE_ENV === 'development'
  ? require('redux-dev-state-persist')
  : () => Promise.resolve()

您可以通过 Webpack 或 Browserify 添加环境变量(对于 Browserify, 查看envify)。

License

麻省理工学院

Redux Dev State Persist

Redux Dev State Persist (RDSP) provides hot-reloading without having to use any sort of Browserify or Webpack plugin- and no mucking about with specific hot-reloading integrations API. Just persist your state!

Installation

npm install --save-dev @abradley2/redux-dev-state-persist

Motivation

When using Redux, all that you really need for the "hot-reloading" functionality is to save your store's state between reloads. This module does exactly that.

It uses localforage as the persistence engine, which will default to indexedDB if available. So if you wish to clear your state you can do so by using your browsers development tools and clearing indexedDB

Smart state-reloading
It is super annoying when persistence reloads old state even though you've changed what initial state a store will have. RDSP will automatically refresh your reloaded state instead of overwriting if it detects you've made changes to what your store's initial state is. If you divide your state between modules, this is on a per-module basis.

Usage

Initiate RDSP by providing a namespace to keep in story ("myReduxAppState" or something) and as the second argument your Redux store.

Initialization returns a promise that resolves when it is finished, or you can provide a callback as the final argument. Be sure you do not dispatch anything between the start and end of initialization.

const rdsp = require('redux-dev-state-persist')
const store = require('./store')
const ReactDOM = require('react-dom')
const App = require('./App')

const startApp = () => ReactDOM.render(<App />, document.body)

rdsp('myReduxAppState', store)
  .then(startApp)
  .catch(err => {
    console.error('some error loading state!')
    startApp()
  })

Caveats

You store's state should be entirely serializable as JSON.

Redux technically allows you to add whatever into your store- even objects that aren't serializable as JSON. This will be persisted differently in indexedDB than in your store, which is not desirable behavior.

Production

You probably don't want to use this in production, so I recommend conditionally assigning RDSP to an empty Promise resolving function

const persistStore = () => proces.env.NODE_ENV === 'development'
  ? require('redux-dev-state-persist')
  : () => Promise.resolve()

You can add in environment variables via Webpack, or Browserify (for Browserify, check out envify).

License

MIT

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文