morpha-store
v0.8.0-alpha8
Published
A Redux Store for Morpha.
Downloads
42
Maintainers
Readme
Morpha-Store
A Redux Store for Morpha.
Guide
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)
},
}
}