morpha-store

import React from 'react'
import ReactDOM from 'react-dom'
import { fetchList } from './apis'
 
import React from 'react'
import ReactDOM from 'react-dom'
import { fetchList } from './apis'
 
export default function morphaDemo({ store }) {
  let nextId = 0
  return {
    store: {
      initialState: {
        todos: [],
        other: 'other',
      },
      get: {
        length: ({ state }) => state.todos.length,
      },
      set: {
        addTodo({ state }, text, id) {
          return {
            ...state,
            todos: state.todos.concat({
              id: id || nextId ++,
              text,
            }),
          }
        },
        delTodo({ state }, id) {
          return {
            ...state,
            todos: state.todos.filter(todo => todo.id !== id),
          }
        },
      },
      action: {
        // 不并发...
        async fetchTodoList() {
          const dataList = await fetchList()
          dataList.forEach((data) => store.set('addTodo', data.text, data.id))
          return true
        },
      },
    },
    bootstrap() {
      store.setState({ todos: [{ id: 'init', text: 'abc' }] })
      // fetch action
      store.execAction('fetchTodoList')
    },
    render() {
      function mergeToProps({ state, setters, getters }) {
        return {
          todos: state.todos,
          addTodo: setters.addTodo,
          delTodo: setters.delTodo,
          length: getters.length(),
        }
      }
      // subscribe action
      const Container = store.connect(mergeToProps)(function TodosComponent({ todos, addTodo, delTodo, length }) {
        return (
          <div>
            <div>
              Totoal: {length}
            </div>
            <ul>
              {todos.map(todo => <li key={todo.id}>{todo.id}:{todo.text} <button onClick={() => delTodo(todo.id)}>Delete</button></li>)}
            </ul>
            <button onClick={() => addTodo('a new todo')}> AddTodo</button>
          </div>
        )
      })
      const el = document.createElement('div')
      document.body.appendChild(el)
      ReactDOM.render(<Container />, el)
    },
  }
}