redux-devshare v0.3.0

redux-devshare

redux-devshare is a redux connector for devshare.

Getting Started

Install through NPM

1. Install: npm install --save redux-devshare

2. Include and use redux-devshare when creating redux middleware, when calling an action, or when combining reducers (examples in Documentation section below).

Examples

Simple example coming soon

• devshare-site
• generator-react-firebase - The output of this generator uses redux-devshare

Documentation

Middleware

import { createStore, applyMiddleware, compose } from 'redux'
import rootReducer from '../reducers' // Combined reducers
import thunk from 'redux-thunk'
import { Middleware } from 'redux-devshare'

const createStoreWithMiddleware = compose(
  // Save for redux middleware
  applyMiddleware(thunk, Middleware)
)(createStore)

Reducers

Add reducers to combineReducers function:

import { combineReducers } from 'redux'
import { routerStateReducer } from 'redux-router'
import { Reducers } from 'redux-devshare'
const { account, projects, entities } = Reducers

let rootReducer = combineReducers({
  account,
  projects,
  entities,
  router: routerStateReducer
})

export default rootReducer

Actions

Example of using Actions from redux-devshare in a smart/linked component (also known as a "container"):

import React, { Component, PropTypes } from 'react'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import { Actions } from 'redux-devshare'

class Main extends Component {
  constructor (props) {
    super(props)
  }
  onLoginClick = e => {
    e.preventDefault()
    const testLogin = { username: 'test', password: 'asdfasdf' }
    this.props.login(testLogin)
  }
  render () {
    return (
      <div className="App">
        <button onClick={ this.onLoginClick }>
          Login
        </button>
      </div>
    )
  }
}

// Place state of redux store into props of component
function mapStateToProps(state) {
  return {
    account: state.account
  }
}

// Place action methods into props
function mapDispatchToProps(dispatch) {
  return bindActionCreators(Actions, dispatch)
}

export default connect(mapStateToProps, mapDispatchToProps)(Main)