redux-imgur

redux-imgur Redux imgur uploader

FEATURES

• Service architecture (redux-manager powered)
• Journaling (redux-journal powered)
• Persist state (PouchDB powered)
• Dynamic service configuration (state.config):
  • docsMax = 2 - maximum docs in state.docs
  • docsMaxOverRemove: true - remove old images over docsMax

Dependencies

npm i -S isomorphic-fetch

INSTALL

Stable

npm i -S redux-imgur

Unstable

npm i -S lokhmakov/redux-imgur

EXAMPLES

NODE-API

require('redux-journal').enable()
 
import { write, error }   from 'redux-journal'
import { manager }        from 'redux-manager'
import { imgurLocal }     from 'redux-imgur'
 
const api = imgurLocal()
 
manager.enableLogger(require('redux-node-logger')())
manager.getStore()
 
const fileToBase64 = (fileName) => new Buffer(require('fs').readFileSync(fileName)).toString('base64')
 
const clientID = 'adcf840e0bf408c'
const imageBase64 = fileToBase64('test.jpg')
 
api.upload({ clientID, imageBase64 }).then((imageLink) => {
  write(imageLink)
}).catch((e) => {
  error(e)
})

PERSIST

require('redux-journal').enable()
 
import PouchDB              from 'pouchdb'
 
const db = PouchDB('data', { db: require('memdown') })
 
import { manager }       from 'redux-manager'
import { imgurActions }  from 'redux-imgur'
import { imgurLocal }    from 'redux-imgur'
import { imgurPersist }  from 'redux-imgur'
 
imgurLocal()
imgurPersist({ db })
 
manager.enableLogger(require('redux-node-logger')())
manager.getStore()
 
const fileToBase64 = (fileName) => new Buffer(require('fs').readFileSync(fileName)).toString('base64')
 
const clientID = 'adcf840e0bf408c'
const imageBase64 = fileToBase64('test.jpg')
 
manager.dispatch(imgurActions.upload({ clientID, imageBase64 }), 'imgur')

REACT

client.js

require('redux-journal').enable()
 
import injectTapEventPlugin from 'react-tap-event-plugin'
 
injectTapEventPlugin()
 
import PouchDB              from 'pouchdb'
 
import { manager }          from 'redux-manager'
import { imgurLocal }       from 'redux-imgur'
import { imgurPersist }     from 'redux-imgur'
 
const service1 = 'imgur'
const service2 = 'imgur2'
const service3 = 'imgur3'
 
imgurLocal({ serviceName: service1 })
imgurPersist({ db: PouchDB('redux-imgur')})
 
imgurLocal({ serviceName: service2 })
imgurLocal({ serviceName: service3 })
 
manager.enableLogger(require('redux-logger')())
const store = manager.getStore()
 
import React                from 'react'
import ReactDOM             from 'react-dom'
import { Provider }         from 'react-redux'
import { connect }          from 'react-redux'
 
import MuiThemeProvider     from 'material-ui/styles/MuiThemeProvider'
import getMuiTheme          from 'material-ui/styles/getMuiTheme'
 
import { ImgurPaper }       from 'redux-imgur'
 
const ImgurPaper1 = connect(state => ({ imgur: state[service1] }))(ImgurPaper)
 
const muiTheme = getMuiTheme({ palette: { accent1Color: require('material-ui/styles/colors').deepOrange500 }})
 
const render = () => ReactDOM.render(
  <Provider store={ store }>
    <MuiThemeProvider muiTheme={ muiTheme }>
      <div>
        <ImgurPaper1 serviceName={ service1 } />
      </div>
    </MuiThemeProvider>
  </Provider>,
  document.getElementById('app')
)
 
 
 
render()