Recost

React context state management system

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

Installing

Use yarn or npm to install the package in your React Application

yarn add recost

Usage

Next you need to initialize the context with a reducer for your application.

index.js

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import initContext, { Provider } from 'recost'

// create a reducer function
const reducer = (state, action) => {
  if (action.type === 'COUNT') {
    return {
      ...state,
      count: state.count + 1
    }
  }

  return state
}

// define the initial state for the application
const initialState = {
  count: 1
}

// initialize the context
initContext(initialState, reducer)

ReactDOM.render(
  <Provider> // add the Provider component to your application
    <App/>
  </Provider>,
  document.getElementById('root')
)

Now you can use the dispatcher and the state anywhere in the code

App.js

import React, { Component } from 'react'
import { dispatch, withState } from 'recost'

let Count = (props) => {
  return <p>{props.count}</p>
}

const mapStateToProps = (state) => ({
  count: state.count
})

Count = withState(mapStateToProps)(Count)

class App extends Component {
  onClickButton() {
    dispatch({
      type: 'COUNT'
    })
  }

  render() {
    return (
      <div>
        <Count/>
        <button onClick={this.onClickButton}>
          Increase
        </button>
      </div>
    )
  }
}

export default App

Using middleware

Available middleware

recost-persist - persist/hydrate state using localstorage recost-logger - logs state changes when in development mode

Create your own

In this example we have added two middleware functions.

A logger, that will run before and after the state changes logging the changes.

logger.js

const before = (state, action) => {
  console.log('State before action:', state)
  console.log('Full action:', action)
}

const after = (state, action) => {
  console.log('State after action:', state)
}

export {
  before,
  after
}

And a callAPI, that runs before each state change.

callAPI.js

const before = (state, action, dispatch) => {
  if (action.type === 'COUNT_API') {
    setTimeout( // simulates and api call
      () => {
        dispatch({
          type: 'SUCCESS_COUNT'
        })
      }
      , 1000
    )
  }
}

export {
  before
}

Now we just need to add the new middleware to the context

index.js

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import initContext, { Provider } from 'recost'
import * as logger from './Context/logger'
import * as callAPI from './Context/callAPI'

// create a reducer function
const reducer = (state, action) => {
  if (action.type === 'COUNT') {
    return {
      ...state,
      count: state.count + 1
    }
  }

  return state
}

// define the initial state for the application
const initialState = {
  count: 1
}

// initialize the context with the middleware
initContext(initialState, reducer, [
  logger,
  callAPI
])

ReactDOM.render(
  <Provider> // add the Provider component to your application
    <App/>
  </Provider>,
  document.getElementById('root')
)

API definition

initContext

Creates a new application context

import initContext from 'recost'

initContext(initialState, reducer, middleware)

Params	required	description
initialState	yes	initial application state
reducer	yes	function that generates new state based on actions
middleware	yes	Array of middleware that can run before or after the reducer taking place

initialState

Defaults to an empty object {}

reducer

const reducer = (state, action) => {
  if (action.type === 'COUNT') {
    return {
      ...state,
      count: state.count + 1
    }
  }

  return state
}

Params	description
state	current application state
action	action object passed by the dispatcher function

middleware

Defaults to an empty array []

dispatch

Dispatches an action that will trigger a state change

import { dispatch } from 'recost'

dispatch(actionObject)

Params	required	description
actionObject	yes	object containing the type of action and the payload if necessary

actionObject

dispatch({
  type: 'COUNT',
  payload: null // this property is only required if we want to pass in some data
})

withState

Composed function that takes a mapStateToProps function and a component

import { withState } from 'recost'

WrappedComponent = withState(mapStateToProps)(Component)

Params	required	description
mapStateToProps	no	function that receives the full state and return a portion of it, if not defined, the entire state is sent to the component
component	yes	component to wrap with state

mapStateToProps

const mapStateToProps = (state) => ({
  count: state.count
})

component

const Count = (props) => {
  return <p>{props.count}</p>
}

const WrappedCount = withState(mapStateToProps)(Count)

or

class Count extends React.[PureComponent|Component] {
  render() {
    return <p>{this.props.count}</p>
  }
}

const WrappedCount = withState(mapStateToProps)(Count)

Provider

Provider component, sets where we want to deliver our context

import React from 'react'
import ReactDOM from 'react-dom'
import { Provider } from 'recost'

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

Contributing

Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.

Versioning

We use SemVer for versioning. For the versions available, see the tags on this repository.

Authors

• João Moura - Initial work - JWebCoder

License

This project is licensed under the MIT License - see the LICENSE.md file for details

Acknowledgments

• Inspired by Statty and Redux