https://github.com/KwanMan/preact-tiny-atom

https://github.com/KwanMan/preact-tiny-atom

Last synced: 2 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/KwanMan/preact-tiny-atom
• Owner: KwanMan
• Created: 2017-09-10T14:13:15.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2017-09-21T09:56:51.000Z (over 7 years ago)
• Last Synced: 2024-10-22T22:35:39.722Z (3 months ago)
• Language: JavaScript
• Size: 7.81 KB
• Stars: 3
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-preact - Preact Tiny Atom - Preact Integration with [Tiny Atom](https://github.com/qubitproducts/tiny-atom). (Uncategorized / Uncategorized)

README

        
# preact-tiny-atom

Integrate [tiny-atom](https://github.com/qubitproducts/tiny-atom) into [preact](https://github.com/developit/preact)

## Usage

Simply wrap your app with the `AtomProvider`:

```js

const preact = require('preact')

const { AtomProvider } = require('preact-tiny-atom')

const createAtom = require('tiny-atom')

const App = require('./App')

const atom = createAtom({

  counts: []

}, evolve, render)

function evolve (get, split, { type, payload }) {

  if (type === 'addCount') {

    const prevCounts = get().counts

    split({

      counts: prevCounts.concat(payload)

    })

  }

}

function render () {

  const root = (

    

      

    

  )

  preact.render(root, document.body, document.body.firstChild)

}

render()

```

Then for each component where you want to grab something from the state:

```js

// App.js

const preact = require('preact')

const { injectAtom } = require('preact-tiny-atom')

const withAtom = injectAtom({

  // Pass an array of keys to grab from the top level state

  grab: ['counts'],

  // Or an object of key/computer pairs to compute

  compute: {

    // Each computer will be given the atom state

    totalCount: state => state.counts.reduce((memo, nextCount) => {

      return memo + nextCount

    }, 0)

    // Or you can pass in an object path string

    firstCount: 'counts.0'

  }

})

// Everything will be passed into the props for your component

const App = function App ({ counts, totalCount, firstCount }) {

  return (

    


      
Counts: [{counts.join(', ')}]

      
Total: {totalCount}

      
First Count: {firstCount}

    

  )

}


module.exports = withAtom(App)

```