k-simple-state

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

Contents

• 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>, <options>)

parameter	required	description
<store_description>	required	object describing your store, it can be nested
<options>	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

1. 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)

2. 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)

4. 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

About

alakarte is created by two passionate french developers.

Do you want to contact them ? Go to their website

Guillaume CRESPEL	Fabien JUIF