Skip to content

JWebCoder/recost

Repository files navigation

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

License

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

Acknowledgments