This is a todo list example.
It is his first release and I have some little problem to fix on one package that make compilation warning. I hope to fix it soon.
All code is working.
I haven't written mocha test.
Is the same example here but this time I have use a Functional style.
I have updated some library and add some change.
Read first this readme
The TodoList application is the same: this help to learn the difference from standard Component and Functional Component style.
The example is too simple to appreciate the reason Functional Programming is a good choice but is a starting point.
I have changed the structure: where and how create actions and reducers and how to bring and bind all together.
I have read some good idea in A new approach to managing Redux actions
So I have put all redux stuf in redux folder in all project folder.
The actions are no more created all together but I use one file for one action and put his reducer in the same file.
Actions is FSA although I use type over his payload.
I use On big constant file in /redux folder and on it all string constant that are key for actions (the Action.type field). So cannot be same constant define two time. All action file import from this file their action type constant.
In the /redux/reducer.ts I import all actions to build the final reducer. All action file have a Reducer object and I put all together in this manner:
const reducerObj = Object.assign({},
//editSetValueReducerObj,
addTodoReducerObj,
todoCompleteToggleReducerObj,
todoDeleteReducerObj,
todoEditReducerObj,
todoEnableToggleReducerObj,
todoSaveEditReducerObj
);In very complex project we can create intermediate reducer object to realize a complex tree.
After we have our tree and his root on reduceObj we can use type-to-reducer to have hour final reducer.
This is an easy way to write action and reducer.
In this example I use:
- TypeScript a beautiful meta language
- Infernojs a great react like framework
- Redux a predictable state container for JavaScript apps to make more easy store and state manage on application component
- inferno-redux an inferno library to pass context.store to each component and more
- Hyperscript an alternative to JSX way
- inferno-hyperscript Hyperscript syntax for Inferno templates
- Hyperscript helper useful way to take benefit by Hyperscript
- W3CSS a modern CSS framework with built-in responsiveness
- Webpack to put all together
- Reselect optimization calculate state selection
- type-to-reducer Create reducer functions based on an object keyed by action types. It helps to organize the Redux reducers
- rambda a small and fast alternative to Ramda. Rambda help is here.
- list a small but great library to handle Big data list ensuring list immutability.
To see the first tools look at readme.
Is a good tool to avoid to rewriting a lot of functional code and have a small size. It is easy to understand and is quick.
Rambda is tree-shaking: it only imports what is used. See this example
There is big sister also: look at rambdax
Is a wonderful library it achieves immutability on big data list. Instead, to use a big framework to immutability, list is a good shortcut. His size is small and is super fast. To work on other type than list and achieve immutability we can use standard vanilla javascript technique like Object.assign(), de-structuring assignment, Rest parameters, ...
Both Rambda than List are not necessary to this example. This is due to the simple nature of this example.
Writing real application and using big data make both tools more useful.
You have to install npm then you have to go on terminal and change folder to source project and do npm install this download and install all dependencies.
npm run start start a server on port 8080, you can see it on your browser on url http://localhost:8080/
npm run build make a production build on dist folder. Here you can see the code is more small due to production optimization.