@dapp-stack/redux-ipfs
Redux wrapper around IPFS.
Installation
# Yarn
yarn add @dapp-stack/redux-ipfs
# NPM
npm install @dapp-stack/redux-ipfs
Initialize with react
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { combineEpics, createEpicMiddleware } from 'redux-observable';
import { combineReducers, compose, createStore, applyMiddleware } from 'redux';
import * as ipfs from "@dapp-stack/redux-ipfs";
const rootEpic = combineEpics(
...ipfs.epics
);
const rootReducer = combineReducers({
ipfs: ipfs.reducer
});
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const epicMiddleware = createEpicMiddleware();
const store = createStore(
rootReducer,
composeEnhancers(
applyMiddleware(epicMiddleware)
)
);
epicMiddleware.run(rootEpic);
ReactDOM.render(
<Provider store={store}>
<YourComponent />
</Provider>,
document.getElementById('root')
);
State
Structure of the state;
enum FileType {
File,
Directory
}
type File = {
name: string;
size: number;
hash: string;
type: FileType;
}
type State = {
root: string;
list: File[];
content: string;
error: Error | null;
}
Default state:
const defaultState: State = {
list: [],
root: '/',
content: '',
error: null
}
Actions
Actions name follow UNIX style:
-
cwd
: Change directory -
ls
: List files -
rm
: Remove file -
cat
: Return the content of file -
touch
: Create a file -
mkdir
: Create a folder -
rmdir
: Remove a folder
You can use them with redux as follow:
connect(
mapStateToProps,
{
ls: ipfs.actions.files.ls,
},
)(YourComponent);
You can also see a detailed usage of the package in our dev-tools