nectarine

A way to manage state in JavaScript applications.

Usage no npm install needed!

<script type="module">
  import nectarine from 'https://cdn.skypack.dev/nectarine';
</script>

README

Nectarine CircleCI

A way to manage state in JavaScript applications.

  • Define a schema to document and enforce the structure of your state
  • Built in support for asynchronous loading of data with promises
  • Define actions on slices of your state to group updates

Usage

Create a slice (a portion of the store)

// store/slices/session.js
import {createSlice} from 'nectarine'

module.exports = createSlice({
  schema: _ => (
    {
      currentUser: {
        name: _,
        email: _
      }
    }
  ),

  actions: {
    initialize: () => {
      // ...
    }
  }
})

Create a store by combining slices

// store/index.js
import {createStore} from 'nectarine'
import sessionSlice from './slices/session'

module.exports = createStore({
  session: sessionSlice
})

Inject the store into your react application

// index.js
import {Provider} from 'nectarine'
import App from './components/app'
import ReactDOM from 'react-dom'
import store from './store'

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('app')
)

Connect components

// components/navigation.js
import {connect} from 'nectarine'
import React from 'react'

class Navigation extends React.Component {
  // ...
}

module.exports = connect({
  component: Navigation,
  mapProps: (store) => {
    //...
  }
})

Documentation