yaux-react
yaux-react is a very lightweight container for React.js based JavaScript apps.
With yaux-react, you can write applications without fighting the framework, and just focus on your domain. It's very testable, predictable, and has overall great developer experience.
And yes, it's VERY tiny. Literally below 100 lines of code.
Influences
Yaux-react is highly influenced by Redux state management
library and implements the same ideas in even more minimalistic way. So
you don't need to deal with endless switch
statements anymore and can
create better structured store code.
Installation
To install the stable version for React:
npm install --save yaux-react
This assumes that you’re using npm package manager with a module bundler like Webpack or Browserify to consume CommonJS modules.
The Gist
The whole state of your app is stored in an object tree. The only way to change the state tree is to emit an action, an object describing what happened. When action is emitted, it's data is handled by action creators and then processed through stores
That’s it!
First, let's define a store for our TODO list:
var store = // This action adds a new item to TODO by inserting it into the array { stateitems } // This action removes an item from the TODO by its index { stateitems } // Update item text { stateitemsparamindex = paramtext // You can return the state, or return nothing to modify the state // "in-place". It's recommended to return the state, though: return state } // etc initialState = items: rootElement = document dispatch = rootReactComponent = React
So, when you need to mutate an application state, you call nux
function with
the first parameter representing action name, and the second parameter
representing action parameters. Then, the current application state is run
through all the stores, and when all the processing is done - an application
state is updated.
License
MIT