Watup, could you pick up this thing for me NEARBY?
HOME NEARBY After 20 metres After 10 metres After 5 metres Destination
HOME NEARBY After 20 metres After 10 metres After 5 metres Destination
You have to check out this RESTAURANT on your trip abroad!
HOTEL RESTAURANT After 20 metres After 10 metres After 100 metres After 28 metres After 5 metres After 50 metres After 23 metres After 5 metres After 10 metres After 20 metres
HOTEL RESTAURANT After 20 metres After 10 metres After 100 metres After 28 metres After 5 metres After 50 metres After 23 metres After 5 metres After 10 metres After 20 metres
HOTEL RESTAURANT After 20 metres After 10 metres After 100 metres IMPERATIVE DECLARATIVE After 28 metres After 5 metres After 50 metres After 23 metres After 5 metres After 10 metres After 20 metres
Cerebral Declarative state and side effects management for popular JavaScript frameworks
Stateful Component method APPLICATION LOGIC Redux Thunk/Reducer Mobx Action Cerebral Signal
webpackbin - 2016 collaboration - 2017
DEBUGGER CODE PROJECT
CODE EDITOR BROWSER COMPANION http://localhost
sandboxChanged 21 state changes 9 side effects 3 files 10 files store/sequences.js pages/index.js store/actions.js store/connection/actions.js store/factories.js store/connection/reducer.js store/user/actions.js store/user/reducer.js store/api/actions.js pages/Sandbox/index.js store/entities/sandboxes/actions/index.js store/entities/sandboxes/reducer.js store/entities/sandboxes/entity.js
export const loadSandbox = factories.withLoadApp([ sandboxChanged set(state`editor.error`, null), when(state`editor.sandboxes.${props`id`}`), { true: [ set(state`editor.currentId`, props`id`), 21 state changes set(props`sandbox`, state`editor.sandboxes.${props`id`}`), actions.setCurrentModuleShortid, actions.setMainModuleShortid, actions.setInitialTab, actions.setUrlOptions, 9 side effects actions.setWorkspace, ], false: [ set(state`editor.isLoading`, true), set(state`editor.notFound`, false), 3 files 10 files set(state`editor.changedModuleShortids`, []), actions.getSandbox, { success: [ store/sequences.js pages/index.js set(state`editor.sandboxes.${props`sandbox.id`}`, props`sandbox`), set(state`editor.currentId`, props`sandbox.id`), store/connection/actions.js store/actions.js actions.setCurrentModuleShortid, store/connection/reducer.js actions.setMainModuleShortid, store/factories.js actions.setInitialTab, store/user/actions.js actions.setUrlOptions, actions.setWorkspace, store/user/reducer.js ensurePackageJSON, store/api/actions.js ], notFound: set(state`editor.notFound`, true), pages/Sandbox/index.js error: set(state`editor.error`, props`error.message`), }, store/entities/sandboxes/actions/index.js ], }, store/entities/sandboxes/reducer.js set(state`editor.isLoading`, false), store/entities/sandboxes/entity.js ]);
export const loadSandbox = withLoadApp([ set(state`editor.error`, null), when(state`editor.sandboxes.${props`id`}`), { true: [ set(state`editor.currentId`, props`id`), set(props`sandbox`, state`editor.sandboxes.${props`id`}`), actions.setCurrentModuleShortid, actions.setMainModuleShortid, actions.setInitialTab, actions.setUrlOptions, actions.setWorkspace, ], false: [ export const loadSandbox = withLoadApp([ set(state`editor.isLoading`, true), set(state`editor.notFound`, false), ... set(state`editor.changedModuleShortids`, []), actions.getSandbox, { success: [ set(state`editor.sandboxes.${props`sandbox.id`}`, props`sandbox`), ]); set(state`editor.currentId`, props`sandbox.id`), actions.setCurrentModuleShortid, actions.setMainModuleShortid, actions.setInitialTab, actions.setUrlOptions, actions.setWorkspace, ensurePackageJSON, ], notFound: set(state`editor.notFound`, true), error: set(state`editor.error`, props`error.message`), }, ], }, set(state`editor.isLoading`, false), ]);
export const loadSandbox = withLoadApp([ set(state`editor.error`, null), when(state`editor.sandboxes.${props`id`}`), { true: [ set(state`editor.currentId`, props`id`), set(props`sandbox`, state`editor.sandboxes.${props`id`}`), actions.setCurrentModuleShortid, actions.setMainModuleShortid, actions.setInitialTab, actions.setUrlOptions, actions.setWorkspace, ], false: [ set(state`editor.isLoading`, true), set(state`editor.notFound`, false), set(state`editor.changedModuleShortids`, []), set(state`editor.error`, null), actions.getSandbox, { success: [ set(state`editor.sandboxes.${props`sandbox.id`}`, props`sandbox`), set(state`editor.currentId`, props`sandbox.id`), actions.setCurrentModuleShortid, actions.setMainModuleShortid, actions.setInitialTab, actions.setUrlOptions, actions.setWorkspace, ensurePackageJSON, ], notFound: set(state`editor.notFound`, true), error: set(state`editor.error`, props`error.message`), }, ], }, set(state`editor.isLoading`, false), ]);
export const loadSandbox = withLoadApp([ set(state`editor.error`, null), when(state`editor.sandboxes.${props`id`}`), { true: [ set(state`editor.currentId`, props`id`), when(state`editor.sandboxes.${props`id`}`), set(props`sandbox`, state`editor.sandboxes.${props`id`}`), actions.setCurrentModuleShortid, { actions.setMainModuleShortid, actions.setInitialTab, actions.setUrlOptions, true: [ actions.setWorkspace, ], ... false: [ set(state`editor.isLoading`, true), set(state`editor.notFound`, false), set(state`editor.changedModuleShortids`, []), ], actions.getSandbox, { success: [ false: [ set(state`editor.sandboxes.${props`sandbox.id`}`, props`sandbox`), set(state`editor.currentId`, props`sandbox.id`), ... actions.setCurrentModuleShortid, actions.setMainModuleShortid, actions.setInitialTab, actions.setUrlOptions, ], actions.setWorkspace, ensurePackageJSON, ], }, notFound: set(state`editor.notFound`, true), error: set(state`editor.error`, props`error.message`), }, ], }, set(state`editor.isLoading`, false), ]);
export const loadSandbox = withLoadApp([ set(state`editor.error`, null), when(state`editor.sandboxes.${props`id`}`), { true: [ set(state`editor.currentId`, props`id`), set(props`sandbox`, state`editor.sandboxes.${props`id`}`), actions.setCurrentModuleShortid, actions.setMainModuleShortid, actions.setInitialTab, set(state`editor.currentId`, props`id`), actions.setUrlOptions, actions.setWorkspace, set(props`sandbox`, state`editor.sandboxes.${props`id`}`), ], false: [ set(state`editor.isLoading`, true), actions.setCurrentModuleShortid, set(state`editor.notFound`, false), set(state`editor.changedModuleShortids`, []), actions.setMainModuleShortid, actions.getSandbox, { success: [ actions.setInitialTab, set(state`editor.sandboxes.${props`sandbox.id`}`, props`sandbox`), set(state`editor.currentId`, props`sandbox.id`), actions.setUrlOptions, actions.setCurrentModuleShortid, actions.setMainModuleShortid, actions.setInitialTab, actions.setWorkspace, actions.setUrlOptions, actions.setWorkspace, ensurePackageJSON, ], notFound: set(state`editor.notFound`, true), error: set(state`editor.error`, props`error.message`), }, ], }, set(state`editor.isLoading`, false), ]);
export const loadSandbox = withLoadApp([ set(state`editor.error`, null), when(state`editor.sandboxes.${props`id`}`), { true: [ set(state`editor.currentId`, props`id`), set(props`sandbox`, state`editor.sandboxes.${props`id`}`), actions.getSandbox, actions.setCurrentModuleShortid, actions.setMainModuleShortid, actions.setInitialTab, { actions.setUrlOptions, actions.setWorkspace, success: [ ], false: [ set(state`editor.isLoading`, true), ... set(state`editor.notFound`, false), set(state`editor.changedModuleShortids`, []), actions.getSandbox, { ], success: [ set(state`editor.sandboxes.${props`sandbox.id`}`, props`sandbox`), set(state`editor.currentId`, props`sandbox.id`), notFound: set(state`editor.notFound`, true), actions.setCurrentModuleShortid, actions.setMainModuleShortid, actions.setInitialTab, error: set(state`editor.error`, props`error.message`), actions.setUrlOptions, actions.setWorkspace, }, ensurePackageJSON, ], notFound: set(state`editor.notFound`, true), error: set(state`editor.error`, props`error.message`), }, ], }, set(state`editor.isLoading`, false), ]);
Lessons learned refactoring Codesandbox.io from Redux to Cerebral https://medium.com/@christianalfoni/lessons-learned-refactoring-codesandbox-io-from- redux-to-cerebral-40e9a5646281
FACEBOOK FLUX DISPATCHER STORE VIEW ACTION
FACEBOOK FLUX BAOBAB ELM DB INSIDE OUT STORE STORE DISPATCHER VIEW STORE STORE ACTION VIEW
{ method: ‘set’, tree.set([‘text’], ‘newText’) path: [‘text’], value: ‘newText’ }
May 8th Immutable-store gets signals and a time machine 2015 https://www.youtube.com/watch?v=Txpw4wU4BCU&t=127s May 9th Cerebral first commit 2015 July 2nd Live React: Hot Reloading with Time Travel at react-europe 2015 2015 https://www.youtube.com/watch?v=xsSnOQynTHs
[ CEREBRAL https://localhost ] FUNCTION-TREE ADDRESSBAR
67 CONTRIBUTORS
www.cerebraljs.com
DISPATCH TRANSACTION MUTATION TREE { method: ‘set’, tree.set([‘text’], ‘newText’) path: [‘text’], value: ‘newText’ } dispatch({ { (state, action) => { type: ‘UPDATE_TEXT’, type: ‘UPDATE_TEXT’, return newState payload: ‘newText’ payload: ‘newText’ } }) }
Recommend
More recommend
