Skip to content

Instantly share code, notes, and snippets.

@travisperson
Last active April 12, 2018 16:15
Show Gist options
  • Save travisperson/8b7a0275c346ba663ee0cd5fc77b7b2a to your computer and use it in GitHub Desktop.
Save travisperson/8b7a0275c346ba663ee0cd5fc77b7b2a to your computer and use it in GitHub Desktop.
Update the Redux TodoMVC example to add `redux-persist` and use an IPFS storage layer provided by IPFS Companion
diff --git a/examples/todomvc/package.json b/examples/todomvc/package.json
index 26dcd9c..1d37ffe 100644
--- a/examples/todomvc/package.json
+++ b/examples/todomvc/package.json
@@ -2,6 +2,7 @@
"name": "todomvc",
"version": "0.0.1",
"private": true,
+ "homepage": "./",
"devDependencies": {
"react-scripts": "^1.1.4",
"react-test-renderer": "^16.3.1"
@@ -13,6 +14,7 @@
"react-dom": "^16.3.1",
"react-redux": "^5.0.7",
"redux": "^3.5.2",
+ "redux-persist": "^5.9.1",
"reselect": "^3.0.1",
"todomvc-app-css": "^2.1.1"
},
diff --git a/examples/todomvc/src/index.js b/examples/todomvc/src/index.js
index d15d78f..27a61b4 100644
--- a/examples/todomvc/src/index.js
+++ b/examples/todomvc/src/index.js
@@ -6,11 +6,26 @@ import App from './components/App'
import reducer from './reducers'
import 'todomvc-app-css/index.css'
-const store = createStore(reducer)
+import { persistStore, persistReducer } from 'redux-persist'
+import { PersistGate } from 'redux-persist/integration/react'
+import storage from './ipfs-storage'
+
+const persistConfig = {
+ key: 'root',
+ storage,
+}
+
+const persistedReducer = persistReducer(persistConfig, reducer)
+
+const store = createStore(persistedReducer)
+const persistor = persistStore(store)
render(
<Provider store={store}>
- <App />
+ <PersistGate loading={null} persistor={persistor}>
+ <App />
+ </PersistGate>
</Provider>,
document.getElementById('root')
)
diff --git a/examples/todomvc/src/ipfs-storage.js b/examples/todomvc/src/ipfs-storage.js
new file mode 100644
index 0000000..56bb616
--- /dev/null
+++ b/examples/todomvc/src/ipfs-storage.js
@@ -0,0 +1,18 @@
+/* global ipfs */
+
+export function createIpfsStorage() {
+ return {
+ getItem: async (key) => {
+ const raw = await ipfs.files.read(`/${key}`)
+ return raw.toString()
+ },
+ setItem: async (key, item) => {
+ await ipfs.files.write(`/${key}`, Buffer.from(item), { create: true, truncate: true })
+ },
+ removeItem: async (key) => {
+ await ipfs.files.rm(`/${key}`)
+ },
+ }
+}
+
+export default createIpfsStorage()
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment