react-store
===

React store

Install

``bash


with yarn

yarn add @francoisv/react-store

with npm

npm i -S @francoisv/react-store
`

Todos

First, let's get our dependencies:

`js
import React from 'react'
import store, { withStore } from '@francoisv/react-store'
`

Now let's create a store array for the todos. For the sake of simplicity, todos are plain strings.
We'll start with one todo in the list.

`js
const todos = store.Array('Buy milk')
`

Now let's just create a list component with it

`jsx
const TodosView = () => (


{ store.get(todos).map(todo => (
• { todo }
)) }


)
`

We want the component to update whenever todos changes. For that, we'll use the HOC withStore

`jsx
const Todos = withStore(todos)(TodosView)
`

Let's add a form to add a new todo.

`jsx
const newTodo = store.string()

const AddTodo = withStore(newTodo)(() => (



value={ store.get(newTodo) }
onChange={ event => store.set(newTodo, event.target.value) }
/>
store.push(todos, store.get(newTodo)) }>
Add


))


`

Now let's create a way to delete todos when they are done. Let's add a checkbox next to each todo to do that.

`jsx
const Todo = props => (



)
`

We can now call each todo such as:

`jsx
{ store.get(todos).map(todo => (

)) }
`

Let's say we want to edit the todo. Let's level our Todo component. We'll use the props to create a local store that will be passed in the props


`jsx
const state = props => ({ nextTodo: store.string() })

const Todo = props => {
const onSave = () => store.map(
todos,
todo => {
// if this current todo, change it with new value
if (todo === props.todo) {
return store.get(props.nextTodo)
}
return todo
}
)

return (



)
}
``