Advertisement
Guest User

Untitled

a guest
Aug 20th, 2019
80
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.29 KB | None | 0 0
  1. import deepEqual from "fast-deep-equal";
  2.  
  3. const debug = true;
  4.  
  5. class AppStore {
  6. constructor(initialState = {}) {
  7. this.handlers = [];
  8. this.state = initialState;
  9.  
  10. if (debug) {
  11. console.log("=== store init ===");
  12. console.log(this.state);
  13. }
  14. }
  15. set(newState = {}) {
  16. const oldState = this.state;
  17. let isEqual = true;
  18.  
  19. // merge state
  20. this.state = {
  21. ...oldState,
  22. ...newState
  23. };
  24.  
  25. // deep diff
  26. Object.keys(this.state).forEach(key => {
  27. if (!oldState.hasOwnProperty(key)) {
  28. isEqual = false;
  29. this.fire(key);
  30. }
  31. if (!deepEqual(oldState[key], this.state[key])) {
  32. isEqual = false;
  33. this.fire(key, oldState[key]);
  34. }
  35. });
  36.  
  37. !isEqual && this.fire("*", oldState);
  38. }
  39. fire(key = "*", oldValue = null) {
  40. debug && console.log(`=== fire: ${key} ===`);
  41.  
  42. // filter handlers
  43. const handlers = this.handlers.filter(function(item) {
  44. if (item.key === key) {
  45. return item;
  46. }
  47. });
  48.  
  49. const newValue = key === "*" ? this.state : this.state[key];
  50.  
  51. // loop through handlers and call functions
  52. handlers.length &&
  53. handlers.forEach(handler => {
  54. handler.fn(oldValue, newValue);
  55. });
  56. }
  57. get(key = "*") {
  58. return key === "*" ? this.state : this.state[key];
  59. }
  60. subscribe(key = "*", fn) {
  61. this.handlers.push({ key, fn });
  62. }
  63. unsubscribe(fn) {
  64. this.handlers = this.handlers.filter(function(item) {
  65. if (item.fn !== fn) {
  66. return item;
  67. }
  68. });
  69. }
  70. }
  71.  
  72. const store = new AppStore({
  73. loading: true,
  74. transitionState: null
  75. });
  76.  
  77. export default store;
  78.  
  79. /* TEST */
  80.  
  81. setTimeout(() => {
  82. store.set({ loading: true, foo: "bar" });
  83. }, 1000);
  84.  
  85. setTimeout(() => {
  86. store.set({ loading: false });
  87. }, 2000);
  88.  
  89. setTimeout(() => {
  90. /* should not do anything */
  91. store.set({ loading: false });
  92. }, 3000);
  93.  
  94. setTimeout(() => {
  95. store.set({ foo: "foo" });
  96. }, 4000);
  97.  
  98. setTimeout(() => {
  99. console.log(store.get());
  100. }, 5000);
  101.  
  102. setTimeout(() => {
  103. console.log(store.get("loading"));
  104. }, 6000);
  105.  
  106. store.subscribe("loading", (oldValue, newValue) => {
  107. console.log("Subscribed to: loading");
  108. console.log({ oldValue, newValue });
  109. });
  110.  
  111. store.subscribe("*", (oldValue, newValue) => {
  112. console.log("Subscribed to: * (everything)");
  113. console.log({ oldValue, newValue });
  114. });
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement