React + Redux Architecture
Feeble is a framework built on top of React/Redux/redux-observable which aims to make building React/Redux applications easier and better.
If you are familiar with React/Redux/redux-observable, you'll love Feeble 🙈.
npm install feeble --saveimport React from 'react'
import ReactDOM from 'react-dom'
import feeble, { connect } from 'feeble'
// 1. Create a app
const app = feeble()
// 2.1 Create model
const counter = feeble.model({
namespace: 'count',
state: 0,
})
// 2.2 Create action creators
counter.action('increment')
counter.action('decrement')
// 2.3 Create reducer
counter.reducer(on => {
on(counter.increment, state => state + 1)
on(counter.decrement, state => state - 1)
})
// 2.4 Attach model to the app
app.model(counter)
// 3. Create view
const App = connect(({ count }) => ({
count
}))(function({ dispatch, count }) {
return (
<div>
<h2>{ count }</h2>
<button key="inc" onClick={() => { dispatch(counter.increment()) }}>+</button>
<button key="dec" onClick={() => { dispatch(counter.decrement()) }}>-</button>
</div>
)
})
// 4. Mount the view
const tree = app.mount(<App />)
// 5. Render to DOM
ReactDOM.render(tree, document.getElementById('root'))For more complex examples, please see /examples.