K-simple-state NPM

k-simple-state

State manager for your components apps, the safe and easy way.

Purpose
Why ?
Installation
API
Examples

Purpose

TODO

Why

TODO

Installation

yarn add k-simple-state
npm install --save k-simple-state

API

createStore(<store_description>, \)

parameter	required	description
<store_description>	required	object describing your store, it can be nested
\	optional	all options you may want to override

options

All options are optionals to keep the default usage as simple as possible.

key	type	default	description
listeners	`array`	`undefined`	array of all listeners. Listeners are a big part of this lib, you can click here for detail.
devtools	`boolean`	`true`	redux-devtools is activated.
hideRedux	`boolean`	`true`	actions and selectors from `k-redux-factory` are used without specifying `dispatch` or `getState`.
enhancer	redux enhancer	`undefined`	usual `compose` and `applyMiddlare` you already use with Redux can be injected here (like router, redux-saga, etc). `compose` and `applyMiddleware` from Redux are exposed by the lib. To use them: `import { compose, applyMiddleware } from 'k-simple-state'`.
init	`object`	`undefined`	the default value of your store.

listeners

TODO

Examples

Create a simple store

import { createStore, keyValue } from 'k-simple-state'

// create a store of todos
const store = createStore({
  todos: keyValue({ key: 'id' }),
})

// dispatch an action and update the store in one line, without k-simple-state inner reducer
store.todos.add({ id: 2, label: 'write a better README' })

// you can retrieve data like that
const todo = store.todos.get(2)

Connect it with ReactJS

Provide this store to React context

app.jsx

import { provider } from 'k-simple-state/react'
import store from './store'
import TodosContainer from './todos.container'

const App = () => <TodosContainer />

// use `provider` HoC to inject store to the React context
export default provider(store)(App)

Use inject to interact with the store, wrap your <Todos /> graphical component in a container

todos.container.js

import { inject } from 'k-simple-state/react'
import Todos from './todos'

// `inject` is an HoC, like `connect` from react-redux,
// it takes one parameter and returns props to be injected to the wrapped component
// (FYI: props injected to the wrapped component are added to the props given by the parent)
export default inject(store => ({
  todos: store.todos.getAsArray(),
  onAdd: event => store.todos.add({ id: Date.now(), label: event.target.value }),
}))(Todos)

Write your classical React JSX component (here, as pure function)

todos.jsx

import React from 'react'
import PropTypes from 'prop-types'

const Todos = ({ todos, onAdd }) => (
  <div>
    <input onBlur={onAdd} />
    <ul>
      {todos.map(todo => <li>{todo.label}</li>})}
    </ul>
  </div>
)

Todos.propTypes = {
  todos: PropTypes.array.isRequired,
  onAdd: PropTypes.func.isRequired,
}

export default Todos