Newlyweds Proposing Marriage

    react-liftc

    0.1.1 • Public • Published

    react-liftC

    This is the result of my frusteration with the amount of time/changes it takes to go from a stateless component to one with state. It's influenced by the same functional programming principles that redux is based on but does not require that all of your state be in a single component.

    I think the best way to show how this works is with an example:

    import liftC from 'react-liftc'
    
    // we're going to be building a counter using only functional components and pure functions
    
    // let's start off with a simple component
    const Counter = ({state, increment}) => (
      <div onClick={increment}>
        {state}
      </div>
    )
    
    // and now let's describe our state and its mutations
    const state = {
      initialValue: 0,
      handlers: {
        // handlers are functions with the signature (previousState, ...args) => newState
        increment(prev) { return prev + 1 }
      }
    }
    
    // and now let's put them together
    const StatefulCounter = liftC(state)(Counter)

    Reusable State

    One benefit of having the state of our components in a separate data structure than the visual structure, is that we can factor out common state into separate entities that we can use multiple times across the application. For example, it is very common to have a component whose sole purpose is to track the toggle state (on/off) of a particular value. To help with this, I included a few common states:

    import liftC, { toggleState } from 'react-liftc'
    
    // the component
    const MyComponent = ({ state, toggle }) => (
        <div onClick={toggle}>
            {String(state)}
        </div>
    )
    
    const StatefulComponent = liftC(toggleState)(MyComponent)

    Install

    npm i react-liftc

    DownloadsWeekly Downloads

    10

    Version

    0.1.1

    License

    MIT

    Last publish

    Collaborators

    • aaivazis