rflux

ReactJS Flux/Redux reimagined using Functional Reactive Programming with KefirJS + epics.

Installation

With npm:

npm install --save react-rflux

or with jspm:

jspm install npm:react-rflux

Why rflux?

• Lightweight at less than 30k. With KefirJS, it's still less than 40k!
• Code components in a manner similar to redux. The power of functional reactive programming as needed. Epics baked right in.
• Redux compatible. Use redux reducers and middleware. redux-dev-tools compatibility is in the works!

Why Epics?

Epics can be thought of as observable-based sagas. (If you don't know what sagas are, think of these as a way to handle async workflows.) The main advantage to epics is that observables are standards based. Both describe a language on top of Javascript. However, I strongly suspect that functional reactive programming with observables is more powerful than sagas.

Oh and by the way, functional reactive programming (or FRP) is just programming with asynchronous data streams. Think map/reduce but with an asynchronous data source instead of arrays.

Usage Example

Build a channel.

// counter.actiontypes.jsexportdefault{increment: 'increment',decrement: 'decrement',}// counter.actions.jsexportdefault{increment: x=>({channel: 'counter',actionType: 'increment',payload: x}),decrement: x=>({channel: 'counter',actionType: 'decrement',payload: x})}// counter.reducers.jsexportdefault{initialState: 0,increment(state,action){const{payload}=actionreturnstate+payload},decrement(state,action){const{payload}=actionreturnstate-payload}}// counter.channel.jsimportActionTypesfrom'./counter.actiontypes'importReducersfrom'./counter.reducers'importActionFunctionsfrom'./counter.actions'exportdefault{channel: 'counter',
ActionTypes,
Reducers,
ActionFunctions
}

Build the app state

// appstate.jsimportappStateFactoryfrom'react-rflux'const{AppState}=appStateFactory({channels: [CounterChannel]})

Hook up the component

import{Container}from'react-rflux'import{AppState}from'./appstate'constCounter=({value, inc, dec})=><div><div>Value: {value}</div><buttononClick={inc}>increase</button><buttononClick={dec}>decrease</button></div>constCounterContainer=()=>{return(<Containervalue={AppState.observables.counter}inc={()=>AppState.actions.increment(1)}dec={()=>AppState.actions.decrement(2)}><Counter/></Container>)}

More Complex "Hello World" Example

Sample usage, for now, can be found at: https://github.com/awesome-editor/awesome-editor/

Documentation

Checkout the docs.