Comments (4)
First of all, thanks and I hope riotux can help you, some day.I think about the concepts itself. Riotux actions are in fact "action creators" in vanilla flux definitions, I tryed simplify, making actions responsability just call store mutations for change the state. I think this way, riotux, provides more organization in your application. Your store just are a central state management and has the responsability to change state via mutations. Actions just called by Components and registered out store.
About the second ideia, I liked. So, now your component can observe the state, passing the name of the state and when the store state changes the component recieves the new state. I will study implement some way to simplify this using your idea.
Great ideia. I will work on the riotux debugging tools. It can be very useful for we. Thanks for ideas!
from mockstate.
The debugging tools are really helpful. Here is what I use after an action has been dispatched and processed:
// displays the differences between new and old state
function debugDiffs() {
var oldState = ...
var newState = ...
var diff = require("deep-diff");
var diffs = diff(oldState, newState);
if(diffs)
{
_.each(diffs, function (d) {
console.log(prettyDiff(d));
});
}
}
export function prettyDiff(d: deepDiff.IDiff)
{
try
{
var path = "";
if(d.path) path = d.path.join(".");
if(d.index!==undefined) path = path + `[${d.index}]`;
var value = d.item ? d.item.rhs : d.rhs;
var msg = "";
switch(d.kind) {
case "N":
msg = `${path} = ${JSON.stringify(d.rhs)};`;
break;
case "E":
msg = `${path} = ${JSON.stringify(d.rhs)}; // was: ${JSON.stringify(d.lhs)}`;
break;
case "D":
msg = `delete ${path}; // was: ${JSON.stringify(d.lhs)}`;
break;
case "A":
switch(d.item.kind) {
case "N":
msg = `${path} = ${JSON.stringify(d.item.rhs)};`;
break;
case "E":
msg = `${path} = ${JSON.stringify(d.item.rhs)}; // was: ${JSON.stringify(d.item.lhs)}`;
break;
case "D":
msg = `delete ${path}; // was ${JSON.stringify(d.item.lhs)}`;
break;
default:
msg = `array change in ${path}: ${JSON.stringify(d)}`;
}
break;
default:
msg = `unknown diff: ${JSON.stringify(d)}`;
}
return msg;
}
catch(ex)
{
return ex.message;
}
}
On npm
there could be other (presumely better) packages for diffing objects. deep-diff
was just the first I found.
Keep up with the good work!
from mockstate.
very good! I liked and looking to use in riotux.
from mockstate.
@nippur72 Now, riotux don't depends of Riot.js observables. Works for itself. Thanks for ideia!
https://github.com/luisvinicius167/riotux#observe-state-changes-in-your-component
from mockstate.
Related Issues (11)
- What is the reason having state name when calling action? HOT 1
- Subscribe handler not being called when performing multiple actions in parallel. HOT 7
- Version 2.0 HOT 4
- There are some problems that need to confirm HOT 2
- Actions being triggered multiple times HOT 2
- Cannot unsubscribe (el is undefined)
- Cannot provide multiple arguments for trigger method HOT 8
- Is it possible to have multiple stores? HOT 2
- Typos, naming and a question HOT 4
- Usage question on Actions HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from mockstate.