luisvinicius167/dutier

  async function handler() {
   const value = 1
   await dispatch(action(value))  
  } 

/**
 * @name Provider
 * @description Provider your store to your application and 
 * provides the store state and store dispatch method to the
 * first children Components level.
 * 
 * @param {Object|Store} store The Store instance
 */
import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-dutier'
import devtools from 'dutier/devtools'
import reducers from './reducers'

const store = devtools(createStore(reducers))

const Increment = ({ state, dispatch }) => 
  <div> 
    <p> Count: {state.count} </p> 
    <button onClick={() => dispatch(increment(1))}> Increment</button>
  </div>

const Decrement = ({ state, dispatch }) => 
  <div> 
    <p> Count: {state.count} </p> 
    <button onClick={() => dispatch(decrement(1))}> Decrement</button>
  </div>

const class App = () => 
  <Provider store={store}>
    <Increment />
    <Decrement />
  </Provider>

render(<App/>, document.getElementById('root'))

/**
 * @name withStore
 * @description You can use withStore function to pass the 
 * store state and disptach method as props to any Component 
 * that you want.
 * 
 * @param {Function}
 */
 import React, { Component } from 'react'
import { withStore } from 'react-dutier'
import App from 'containers/app'

class App extends Component {
  componentDidMount(){
    console.log(this.props) // logs: { state, dispatch }
  }
  
  render(){
    return (<div />)
  }
}

export default withStore(App)

/**
 * @name devtools
 * @description Dutier Version of Redux devtools.
 * @param { Store|Object } Dutier Store
 */
import { createStore } from 'dutier'
import devtools from 'dutier/devtools'

const store = devtools(createStore())

import { createStore, applyMiddleware } from 'dutier'
import Logger from 'dutier-logger'

/**
 * Reducer
 * The reducer state needs to be an Object
 * Each reducer receives the state as first argument
 * the action payload as second argument
 */
const initialState = { count: 1 }
function reducer( state=initialState, { type, payload } ) {
  switch (type) {
    case 'INCREMENT':
        return { count: state.count + payload }
    default:
      return state  
  }
}

/**
 * Create the store and pass the reducers if you have.
 * Create store returns the functions: subscribe, dispatch and getState
 */
const store = createStore(reducer)

/**
 * Apply your custom middleware function that
 * be called each time your store dispatch actions
 * You can use Dutier Logger library.
 * https://github.com/luisvinicius167/dutier-logger
 */
applyMiddleware(Logger)


/**
 * Actions are pure functions that return a new function
 * that will dispatch the payload information to Reducer
 */
 const increment = payload => dispatch => dispatch({ type: 'INCREMENT', payload })

/**
 * Reducer
 * Each reducer receives the application state as first argument,
 * the action payload
 */
const initialState = { count: 1 }
function reducer( state=initialState, { type, payload } ) {
  switch (type) {
    case 'INCREMENT':
        return { count: state.count + payload }
    default:
      return state  
  }
}
    
/**
 * You can use store.subscribe() to update your UI in response to actions;
 * The subscribe are just be called if the state was changed.
 */
  this.unsubscribe = store.subscribe( { type, state, payload } ) => {
    console.log('Reducer new state value ', state, 'Store state: ', store.getState())
  })


/**
 * Use store.dispatch to return new values based on the state
 * tree. store.dispatch is async and returns a Promise with your action type and
 * the new state value.
 */
store.dispatch( increment( 1 ) )
 .then( ({ type, state }) => {
   console.log(`The value is: ${getState().count}`) // 2
 })

/**
 * @name dispatch
 * @description Trigger some action.
 * @param { Function } The function that return your action payload
 * @return { Promise } Return a Promise with the action payload
 */

// You can receive the response of your action and do something, or not.
// If you want, you can chain the dispatch Promises.
store.dispatch( increment(1) )

store
  .dispatch( increment(1) )
  .then( ({ type, state }) => {
    console.log(type, state)
  })

function increment( payload ) {
  return dispatch => dispatch({ type: 'INCREMENT', payload })
}

/**
 * @name createStore
 * You just can set your store state one time.
 * @param { Function } reducer Your store reducers
 */
 
import { createStore } from 'dutier'

const store = createStore([, ...reducers] )

/**
 * @name getState
 * @description Get the current state value
 */

store.getState() // returns a copy of your store state { count: 1 }

/**
 * @name combine
 * @param { Function } Your reducers
 */
 
import { combine } from 'dutier'

function reducer( state={ count: 1 }, { type, payload }) {
  switch (type) {
    case 'INCREMENT':
      return { count: state.count + payload }
    default:
      return state  
  }
}

function otherReducer( state={ counter: 1}, { type, payload } ) {
  switch (type) {
    case 'ADD':
      return { count: payload }
    default:
      return state  
  }
}

combine( reducer, otherReducer, [, ...reducers ])

/**
 * @name middleware
 * @param { Function } middleware Your middleware functions 
 * that will be called each time your store dispatch actions
 * @param { Object } data Each middleware function receives a 
 * data object with the properties action (your action payload), 
 * oldState (the old state) and state (current state ) 
 */
  
import { applyMiddleware } from 'dutier'

const logger = data => console.log(data)
applyMiddleware(logger [, ...middlewares ])

/**
 * @name subscribe
 * @param { handler } handler A callback function that will be triggered when
 * your state change
 */
  
  componentWillMount(){
     // Subscribe to changes on your store, do something with the value.
     this.unsubscribe = store.subscribe(( { type, state, payload } ) => {
       this.setState( { count: store.getState().count } )
     })
  }
  
  componentWillUnmount() {
    this.unsubscribe()
  }