Skip to content

Instantly share code, notes, and snippets.

@alexkrolick

alexkrolick/0-redux.md

Last active December 6, 2023 09:18
Show Gist options
  • Save alexkrolick/587ba8d82763575772dd42eb4e080e3b to your computer and use it in GitHub Desktop.
Save alexkrolick/587ba8d82763575772dd42eb4e080e3b to your computer and use it in GitHub Desktop.
Download ZIP
Raw
1-redux.excalidraw
{
"type": "excalidraw",
"version": 1,
"source": "https://excalidraw.com",
"elements": [
{
"id": "ir2uJYd1kGnEkhkF7W_wE",
"type": "text",
"x": -177.5,
"y": -244.5,
"width": 103,
"height": 45,
"angle": 0,
"strokeColor": "#000000",
"backgroundColor": "transparent",
"fillStyle": "hachure",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100,
"seed": 1814948994,
"version": 195,
"versionNonce": 144395730,
"isDeleted": false,
"text": "Redux",
"font": "36px Virgil",
"textAlign": "left",
"baseline": 32
},
{
"id": "OkO9LIBDQV9f4jtfsLg2_",
"type": "text",
"x": 1044,
"y": 34.5,
"width": 105,
"height": 45,
"angle": 0,
"strokeColor": "#000000",
"backgroundColor": "transparent",
"fillStyle": "hachure",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100,
"seed": 1207421570,
"version": 96,
"versionNonce": 1855230738,
"isDeleted": false,
"text": "React",
"font": "36px Virgil",
"textAlign": "left",
"baseline": 32
},
{
"id": "w0VN3-Ymhsp1nonqePdlD",
"type": "text",
"x": 246,
"y": 254.5,
"width": 328,
"height": 25,
"angle": 0,
"strokeColor": "#000000",
"backgroundColor": "transparent",
"fillStyle": "hachure",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100,
"seed": 844306206,
"version": 174,
"versionNonce": 1237018818,
"isDeleted": false,
"text": "createStore(reducer, initialState)",
"font": "20px Virgil",
"textAlign": "left",
"baseline": 18
},
{
"id": "8fv9fLKEHe-WtjGvkcm8o",
"type": "arrow",
"x": 593,
"y": 267,
"width": 42,
"height": 1,
"angle": 0,
"strokeColor": "#000000",
"backgroundColor": "transparent",
"fillStyle": "hachure",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100,
"seed": 786816350,
"version": 13,
"versionNonce": 1303723614,
"isDeleted": false,
"points": [
[
0,
0
],
[
42,
1
]
],
"lastCommittedPoint": null
},
{
"id": "lVVJvGdiLXNN-kL59Kbti",
"type": "text",
"x": 654.5,
"y": 242.5,
"width": 75,
"height": 35,
"angle": 0,
"strokeColor": "#000000",
"backgroundColor": "transparent",
"fillStyle": "hachure",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100,
"seed": 1174721180,
"version": 42,
"versionNonce": 998974876,
"isDeleted": false,
"text": "store",
"font": "28px Virgil",
"textAlign": "left",
"baseline": 25
},
{
"id": "ahA-XsBkOM4v6WVIWTrJG",
"type": "text",
"x": 363.5,
"y": 462,
"width": 267,
"height": 50,
"angle": 0,
"strokeColor": "#000000",
"backgroundColor": "transparent",
"fillStyle": "hachure",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100,
"seed": 634809252,
"version": 368,
"versionNonce": 1633619868,
"isDeleted": false,
"text": "Other stuff can subscribe!\nnot just React",
"font": "20px Virgil",
"textAlign": "left",
"baseline": 43
},
{
"id": "tY1o8XBosBNdV91fxq8PS",
"type": "arrow",
"x": 936,
"y": 216,
"width": 190,
"height": 39,
"angle": 0,
"strokeColor": "#000000",
"backgroundColor": "transparent",
"fillStyle": "hachure",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100,
"seed": 1252212900,
"version": 127,
"versionNonce": 1673975836,
"isDeleted": false,
"points": [
[
0,
0
],
[
-190,
39
]
],
"lastCommittedPoint": null
},
{
"id": "mdkt4Kfgg7raWrIUdxwDM",
"type": "text",
"x": 965,
"y": 168.5,
"width": 252,
"height": 75,
"angle": 0,
"strokeColor": "#000000",
"backgroundColor": "transparent",
"fillStyle": "hachure",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100,
"seed": 762332828,
"version": 116,
"versionNonce": 1180879780,
"isDeleted": false,
"text": "<Provider store={store}>\n <App />\n</Provider>",
"font": "20px Virgil",
"textAlign": "left",
"baseline": 68
},
{
"id": "yQim9eOfenrh2Pnn7HqCt",
"type": "arrow",
"x": 1083,
"y": 206,
"width": 93,
"height": 93,
"angle": 0,
"strokeColor": "#000000",
"backgroundColor": "transparent",
"fillStyle": "hachure",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100,
"seed": 902761508,
"version": 244,
"versionNonce": 625516580,
"isDeleted": false,
"points": [
[
0,
0
],
[
93,
93
]
],
"lastCommittedPoint": null
},
{
"id": "unm8ZpZsALaecix6YmHWv",
"type": "text",
"x": 1145,
"y": 312,
"width": 176,
"height": 100,
"angle": 0,
"strokeColor": "#000000",
"backgroundColor": "transparent",
"fillStyle": "hachure",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100,
"seed": 233369764,
"version": 207,
"versionNonce": 1781239460,
"isDeleted": false,
"text": "App Components:\n <UserPage />\n <Post />\n <Comments />",
"font": "20px Virgil",
"textAlign": "left",
"baseline": 93
},
{
"id": "xuugEnJcSAJwGGgJ6Bcmu",
"type": "arrow",
"x": 588,
"y": 454,
"width": 85,
"height": 166,
"angle": 0,
"strokeColor": "#000000",
"backgroundColor": "transparent",
"fillStyle": "hachure",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100,
"seed": 1319789348,
"version": 237,
"versionNonce": 2112409362,
"isDeleted": false,
"points": [
[
0,
0
],
[
85,
-166
]
],
"lastCommittedPoint": null
},
{
"id": "IBRnm7Uy2Oddmb2OILKNb",
"type": "text",
"x": 369.5,
"y": 530.5,
"width": 407,
"height": 125,
"angle": 0,
"strokeColor": "#000000",
"backgroundColor": "transparent",
"fillStyle": "hachure",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100,
"seed": 594033948,
"version": 427,
"versionNonce": 2046261134,
"isDeleted": false,
"text": "store.subscribe(onChange)\nonChange:\n store.getState() => newState\n // do stuff with state\n store.dispatch({ type: 'do/something' })",
"font": "20px Virgil",
"textAlign": "left",
"baseline": 118
},
{
"id": "5_UJUQg8WyFYr-i9RYhHV",
"type": "text",
"x": 563.5,
"y": -86.5,
"width": 231,
"height": 225,
"angle": 0,
"strokeColor": "#000000",
"backgroundColor": "transparent",
"fillStyle": "hachure",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100,
"seed": 458054692,
"version": 346,
"versionNonce": 154100380,
"isDeleted": false,
"text": "{ users: {\n sortedUserIds: [],\n usersById: {},\n },\n posts: {\n postsById: {},\n },\n comments: {/* ...? */}\n}",
"font": "20px Virgil",
"textAlign": "left",
"baseline": 218
},
{
"id": "h5TusHqVlQjnp87iz7NtS",
"type": "text",
"x": 485.5,
"y": -143.5,
"width": 423,
"height": 25,
"angle": 0,
"strokeColor": "#000000",
"backgroundColor": "transparent",
"fillStyle": "hachure",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100,
"seed": 1536732444,
"version": 64,
"versionNonce": 609421476,
"isDeleted": false,
"text": "this is what a store state could look like:",
"font": "20px Virgil",
"textAlign": "left",
"baseline": 18
},
{
"id": "xQhQz3vr-Ev4fFzaT6IPJ",
"type": "text",
"x": 1090.5,
"y": 438,
"width": 411,
"height": 150,
"angle": 0,
"strokeColor": "#000000",
"backgroundColor": "transparent",
"fillStyle": "hachure",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100,
"seed": 406738716,
"version": 635,
"versionNonce": 1079438884,
"isDeleted": false,
"text": "They can all read from the store\nand dispatch actions to it\nThe Provider component subscribes to \nthe store on their behalf and uses \nReact Context to tell them to re-render\nwhen a new state comes in.",
"font": "20px Virgil",
"textAlign": "left",
"baseline": 143
},
{
"id": "qw27P7sneu__kUcIr42xs",
"type": "text",
"x": 854,
"y": 473.5,
"width": 128,
"height": 60,
"angle": 0,
"strokeColor": "#000000",
"backgroundColor": "transparent",
"fillStyle": "hachure",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100,
"seed": 1122842148,
"version": 388,
"versionNonce": 124689948,
"isDeleted": false,
"text": "this is what the\nreact-redux\nProvider does!",
"font": "16px Virgil",
"textAlign": "left",
"baseline": 54
},
{
"id": "AeLN70kTzVuNRb73jJ4hr",
"type": "arrow",
"x": 838,
"y": 500,
"width": 193,
"height": 42,
"angle": 0,
"strokeColor": "#000000",
"backgroundColor": "transparent",
"fillStyle": "hachure",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100,
"seed": 1661867804,
"version": 546,
"versionNonce": 1363317404,
"isDeleted": false,
"points": [
[
0,
0
],
[
-193,
42
]
],
"lastCommittedPoint": null
},
{
"id": "4Ee_ewtrVmtiF1FU-A_Wg",
"type": "text",
"x": 94,
"y": 333,
"width": 276,
"height": 125,
"angle": 0,
"strokeColor": "#000000",
"backgroundColor": "transparent",
"fillStyle": "hachure",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100,
"seed": 423704348,
"version": 1057,
"versionNonce": 1911546770,
"isDeleted": false,
"text": "store keeps track of\nall the subscribers and\ncalls the onchange functions\nthey gave it whenever it\nproduces a new state",
"font": "20px Virgil",
"textAlign": "left",
"baseline": 118
},
{
"id": "jkPPgwlOgE88QiSOeT1kh",
"type": "text",
"x": 853,
"y": -60,
"width": 248,
"height": 40,
"angle": 0,
"strokeColor": "#000000",
"backgroundColor": "transparent",
"fillStyle": "hachure",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100,
"seed": 104459804,
"version": 184,
"versionNonce": 1025368228,
"isDeleted": false,
"text": "any type of object can be used\nas state, even an array",
"font": "16px Virgil",
"textAlign": "left",
"baseline": 34
},
{
"id": "4j2uIve6MAdkF6NrE6yAc",
"type": "text",
"x": 1308.5,
"y": -85.5,
"width": 497,
"height": 325,
"angle": 0,
"strokeColor": "#000000",
"backgroundColor": "transparent",
"fillStyle": "hachure",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100,
"seed": 615762452,
"version": 1322,
"versionNonce": 1439421650,
"isDeleted": false,
"text": "react-redux helper functions:\n connect(...)(Component):\n takes a component and gives you\n a new component with the store\n state and action dispatchers mapped\n to the component's props, so it can use redux\n useDispatch:\n react hook that gives a component\n access to the store's dispatch method\n useSelector:\n react hook that gives a component\n access to the store state\n it takes a selector function",
"font": "20px Virgil",
"textAlign": "left",
"baseline": 318
},
{
"id": "VlgqHvYZ4yTCpwOyBxjVb",
"type": "text",
"x": -212.5,
"y": -174.5,
"width": 485,
"height": 125,
"angle": 0,
"strokeColor": "#000000",
"backgroundColor": "transparent",
"fillStyle": "hachure",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100,
"seed": 1676261932,
"version": 463,
"versionNonce": 1526811263,
"isDeleted": false,
"text": "The store's reducer is a function that\ntakes the current state and an action\nand returns a new state\n\nall changes to the state go through the reducer",
"font": "20px Virgil",
"textAlign": "left",
"baseline": 118
},
{
"id": "EQsgbG3zuEsLGlEp1ZZ-a",
"type": "text",
"x": -195,
"y": 18,
"width": 464,
"height": 200,
"angle": 0,
"strokeColor": "#000000",
"backgroundColor": "transparent",
"fillStyle": "hachure",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100,
"seed": 1200049292,
"version": 542,
"versionNonce": 223695890,
"isDeleted": false,
"text": "function reducer(state, action) {\n switch(action.type) {\n case 'posts/delete': {\n return { ...state, posts: { ...posts,\n postsById: state.postsById.filter(\n post => post.id != action.payload.id\n )}\n // ...",
"font": "20px Virgil",
"textAlign": "left",
"baseline": 193
},
{
"id": "esO41wqy1EkN-SrqdKcJ7",
"type": "text",
"x": -203.5,
"y": -28.5,
"width": 375,
"height": 25,
"angle": 0,
"strokeColor": "#000000",
"backgroundColor": "transparent",
"fillStyle": "hachure",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100,
"seed": 1688570830,
"version": 139,
"versionNonce": 794991822,
"isDeleted": false,
"text": "this is what a reducer might look like:",
"font": "20px Virgil",
"textAlign": "left",
"baseline": 18
},
{
"id": "CiKPzrT50o_9B21c3PBKW",
"type": "arrow",
"x": 501,
"y": 245,
"width": 47,
"height": 98,
"angle": 0,
"strokeColor": "#000000",
"backgroundColor": "transparent",
"fillStyle": "hachure",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100,
"seed": 2087078674,
"version": 70,
"versionNonce": 1455985422,
"isDeleted": false,
"points": [
[
0,
0
],
[
47,
-98
]
],
"lastCommittedPoint": [
47,
-98
]
},
{
"id": "9dSppE_XjIL12KwWOMlVj",
"type": "arrow",
"x": 421,
"y": 255,
"width": 140,
"height": 139,
"angle": 0,
"strokeColor": "#000000",
"backgroundColor": "transparent",
"fillStyle": "hachure",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100,
"seed": 808937038,
"version": 93,
"versionNonce": 700396430,
"isDeleted": false,
"points": [
[
0,
0
],
[
-42,
-99
],
[
-140,
-139
]
],
"lastCommittedPoint": [
-140,
-139
]
},
{
"id": "CW0LZa1yfmDyE_YE2sdI-",
"type": "text",
"x": -153,
"y": 514,
"width": 303,
"height": 200,
"angle": 0,
"strokeColor": "#000000",
"backgroundColor": "transparent",
"fillStyle": "hachure",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100,
"seed": 311129934,
"version": 165,
"versionNonce": 249096078,
"isDeleted": false,
"text": "middlewares can accept\nbe attached to the store.\nthey take actions as they \nare called and can transform\nthem into other actions or\ndo side-effects (stuff\nthat doesn't affect the store\nitself, like log errors)",
"font": "20px Virgil",
"textAlign": "left",
"baseline": 193
},
{
"id": "AlVdmHZFQhwatMjOHZbui",
"type": "text",
"x": -206.5,
"y": 288,
"width": 251,
"height": 100,
"angle": 0,
"strokeColor": "#000000",
"backgroundColor": "transparent",
"fillStyle": "hachure",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100,
"seed": 1880937678,
"version": 102,
"versionNonce": 938287310,
"isDeleted": false,
"text": "new states are produced\nby calling dispatch(action)\nand taking whatever the\nreducer function returns",
"font": "20px Virgil",
"textAlign": "left",
"baseline": 93
},
{
"id": "ISsTPSt6sZSmnXoP9mHx3",
"type": "text",
"x": 1595.5,
"y": 279,
"width": 411,
"height": 350,
"angle": 0,
"strokeColor": "#000000",
"backgroundColor": "transparent",
"fillStyle": "hachure",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100,
"seed": 1448267342,
"version": 599,
"versionNonce": 1385410062,
"isDeleted": false,
"text": "Concepts\n\nSelectors\n a selector is function that takes\n the state and returns a derived value,\n often memoized for performance)\n * const selectAllPosts =\n (state) => state.posts\nImmutability\n most redux operations return\n new objects instead of modifying\n existing ones, because comparing\n object identity is the easiest\n way to tell if something has changed",
"font": "20px Virgil",
"textAlign": "left",
"baseline": 343
},
{
"id": "ZmXw-m3MdOoLGJghFCyUq",
"type": "text",
"x": -219,
"y": 797.5,
"width": 258,
"height": 325,
"angle": 0,
"strokeColor": "#000000",
"backgroundColor": "transparent",
"fillStyle": "hachure",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100,
"seed": 871856590,
"version": 788,
"versionNonce": 1508469010,
"isDeleted": false,
"text": "Actions = Events\n\nthe conventional format is\n{ type: \"\", payload: {}, }\n\n{\n type: \"users/get\",\n payload: { id: \"123\" }\n}\n\nthis format is useful\nfor key-value lookups\nand switch statements",
"font": "20px Virgil",
"textAlign": "left",
"baseline": 318
},
{
"id": "DgFvRWxbhf3aZhJO69MC4",
"type": "text",
"x": 277.5,
"y": 737.5,
"width": 531,
"height": 425,
"angle": 0,
"strokeColor": "#000000",
"backgroundColor": "transparent",
"fillStyle": "hachure",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100,
"seed": 22515154,
"version": 1332,
"versionNonce": 1515528274,
"isDeleted": false,
"text": "Thunk Middleware\nallows dispatching functions\ninstead of plain objects\nso that you can do multi-part flows\n\ndispatch((dispatch, getState) => {\n dispatch({\n type: 'user/get/started',\n payload: { id: 234 }\n })\n // use getState() in between\n // dispatches to read the latest\n // state\n getUserFromApi(payload.id)\n .then(() => dispatch({ type: 'user/get/ok' }))\n .catch(() => dispatch({ type: 'user/get/error' }))\n })",
"font": "20px Virgil",
"textAlign": "left",
"baseline": 418
},
{
"id": "ukhM-rVu6F2SRvYZwTGjc",
"type": "text",
"x": 961.5,
"y": 746,
"width": 565,
"height": 550,
"angle": 0,
"strokeColor": "#000000",
"backgroundColor": "transparent",
"fillStyle": "hachure",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100,
"seed": 675095378,
"version": 1283,
"versionNonce": 1845068818,
"isDeleted": false,
"text": "Action Creators\nutility functions that return something\nto dispatch\n\nconst updateUserName = ({ id, name }) => {\n return {\n type: 'user/updateName',\n payload: { id, name }\n }\n}\n\nalso works with thunks:\nconst getUser = ({ id }) => {\n return (dispatch, getState) => {\n // ... see inline example\n }\n}\n\n\nusing:\ndispatch(updateUserName({ id: '123', name: 'cleopatra' }))\ndispatch(getUser({ id: '234' }))",
"font": "20px Virgil",
"textAlign": "left",
"baseline": 543
},
{
"id": "KNyfSwcn6zgWqfb_6GAZM",
"type": "arrow",
"x": 807.1590412415565,
"y": 1025.0107307040507,
"width": 164.84095875844355,
"height": 79.9892692959495,
"angle": 0,
"strokeColor": "#000000",
"backgroundColor": "transparent",
"fillStyle": "hachure",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100,
"seed": 156723150,
"version": 601,
"versionNonce": 950779278,
"isDeleted": false,
"points": [
[
164.84095875844355,
79.9892692959495
],
[
118.78245557593722,
75.92201831479953
],
[
107.46984075918131,
43.38401046559972
],
[
98.58135768887308,
17.624754251649847
],
[
67.87568890053554,
2.711500654099965
],
[
0,
0
]
],
"lastCommittedPoint": [
204,
118
]
},
{
"id": "1b3dcvItKPZcb34ukZs0R",
"type": "line",
"x": -86,
"y": 1388,
"width": 1570,
"height": 0,
"angle": 0,
"strokeColor": "#000000",
"backgroundColor": "transparent",
"fillStyle": "hachure",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100,
"seed": 1408855950,
"version": 207,
"versionNonce": 1704898847,
"isDeleted": false,
"points": [
[
0,
0
],
[
1570,
0
]
],
"lastCommittedPoint": null
},
{
"id": "2AIItoIcWnnd60VW94OG8",
"type": "rectangle",
"x": -44,
"y": 1495,
"width": 188,
"height": 137,
"angle": 0,
"strokeColor": "#000000",
"backgroundColor": "transparent",
"fillStyle": "hachure",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100,
"seed": 82444174,
"version": 139,
"versionNonce": 1902605905,
"isDeleted": false
},
{
"id": "HgvsACLnMSSHy3HYVZEXx",
"type": "text",
"x": -43,
"y": 1462.5,
"width": 56,
"height": 25,
"angle": 0,
"strokeColor": "#000000",
"backgroundColor": "transparent",
"fillStyle": "hachure",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100,
"seed": 951024398,
"version": 47,
"versionNonce": 1897378446,
"isDeleted": false,
"text": "state",
"font": "20px Virgil",
"textAlign": "left",
"baseline": 18
},
{
"id": "uoNnRfJaT5MEttrS1ff0v",
"type": "rectangle",
"x": -71,
"y": 1457,
"width": 246,
"height": 200,
"angle": 0,
"strokeColor": "#000000",
"backgroundColor": "transparent",
"fillStyle": "hachure",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100,
"seed": 1343061503,
"version": 210,
"versionNonce": 209057297,
"isDeleted": false
},
{
"id": "XwSxALyY_3I0ZMcOket9B",
"type": "text",
"x": -69.5,
"y": 1419.5,
"width": 53,
"height": 25,
"angle": 0,
"strokeColor": "#000000",
"backgroundColor": "transparent",
"fillStyle": "hachure",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100,
"seed": 1211905279,
"version": 40,
"versionNonce": 15176095,
"isDeleted": false,
"text": "store",
"font": "20px Virgil",
"textAlign": "left",
"baseline": 18
},
{
"id": "x-Sc5FAPE-CSOgCRZGIyN",
"type": "diamond",
"x": 391,
"y": 1472,
"width": 67,
"height": 67,
"angle": 0,
"strokeColor": "#000000",
"backgroundColor": "transparent",
"fillStyle": "hachure",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100,
"seed": 1699480849,
"version": 80,
"versionNonce": 1135037905,
"isDeleted": false
},
{
"id": "H6EleGNPO2-23xpvbIqee",
"type": "text",
"x": 383,
"y": 1426.5,
"width": 80,
"height": 25,
"angle": 0,
"strokeColor": "#000000",
"backgroundColor": "transparent",
"fillStyle": "hachure",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100,
"seed": 1655619135,
"version": 106,
"versionNonce": 1954358001,
"isDeleted": false,
"text": "Provider",
"font": "20px Virgil",
"textAlign": "left",
"baseline": 18
},
{
"id": "AMBucJU6YY-vVlaK1K5vJ",
"type": "line",
"x": 462,
"y": 1506,
"width": 139,
"height": 49,
"angle": 0,
"strokeColor": "#000000",
"backgroundColor": "transparent",
"fillStyle": "hachure",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100,
"seed": 1312260273,
"version": 35,
"versionNonce": 860323505,
"isDeleted": false,
"points": [
[
0,
0
],
[
139,
-49
]
],
"lastCommittedPoint": null
},
{
"id": "u3gMhHlvfTFeO5T2Iv-Wa",
"type": "line",
"x": 468,
"y": 1508,
"width": 127,
"height": 73,
"angle": 0,
"strokeColor": "#000000",
"backgroundColor": "transparent",
"fillStyle": "hachure",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100,
"seed": 130638783,
"version": 141,
"versionNonce": 939015025,
"isDeleted": false,
"points": [
[
0,
0
],
[
127,
73
]
],
"lastCommittedPoint": null
},
{
"id": "K2RY2UcwD-xDa8JmU9EP-",
"type": "text",
"x": 615.5,
"y": 1443.5,
"width": 91,
"height": 25,
"angle": 0,
"strokeColor": "#000000",
"backgroundColor": "transparent",
"fillStyle": "hachure",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100,
"seed": 1669556913,
"version": 94,
"versionNonce": 543522431,
"isDeleted": false,
"text": "PostPage",
"font": "20px Virgil",
"textAlign": "left",
"baseline": 18
},
{
"id": "kz3Uo_hzyegVy_Mrtxu4U",
"type": "text",
"x": 608.5,
"y": 1571.5,
"width": 193,
"height": 25,
"angle": 0,
"strokeColor": "#000000",
"backgroundColor": "transparent",
"fillStyle": "hachure",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100,
"seed": 517336625,
"version": 180,
"versionNonce": 1785603071,
"isDeleted": false,
"text": "FavoritePostButton",
"font": "20px Virgil",
"textAlign": "left",
"baseline": 18
},
{
"id": "HdfMpkMSfvO4zjPbSRZNX",
"type": "line",
"x": 181,
"y": 1505,
"width": 196,
"height": 0,
"angle": 0,
"strokeColor": "#000000",
"backgroundColor": "transparent",
"fillStyle": "hachure",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100,
"seed": 5174239,
"version": 60,
"versionNonce": 206866961,
"isDeleted": false,
"points": [
[
0,
0
],
[
196,
0
]
],
"lastCommittedPoint": null
},
{
"id": "dULwcI7p5ut6I9GqC88SX",
"type": "text",
"x": -38.5,
"y": 1495.5,
"width": 167,
"height": 125,
"angle": 0,
"strokeColor": "#000000",
"backgroundColor": "transparent",
"fillStyle": "hachure",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100,
"seed": 1420966591,
"version": 194,
"versionNonce": 587052657,
"isDeleted": false,
"text": "posts\n 1: {\n message: 'hi',\n isFave: false\n }",
"font": "20px Virgil",
"textAlign": "left",
"baseline": 118
},
{
"id": "tSUWpuy4WdvEXS2XmzD03",
"type": "text",
"x": 729,
"y": 1443.5,
"width": 34,
"height": 25,
"angle": 0,
"strokeColor": "#000000",
"backgroundColor": "transparent",
"fillStyle": "hachure",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100,
"seed": 1604954353,
"version": 120,
"versionNonce": 1739992785,
"isDeleted": false,
"text": "id: 1",
"font": "20px Virgil",
"textAlign": "left",
"baseline": 18
},
{
"id": "58LrCxGfComT64b1P-g98",
"type": "text",
"x": 649.5,
"y": 1477.5,
"width": 337,
"height": 25,
"angle": 0,
"strokeColor": "#000000",
"backgroundColor": "transparent",
"fillStyle": "hachure",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100,
"seed": 1937751569,
"version": 245,
"versionNonce": 1743851807,
"isDeleted": false,
"text": "post = useSelector(selectPost(id))",
"font": "20px Virgil",
"textAlign": "left",
"baseline": 18
},
{
"id": "0dgM25ah1RDpjD-199ayJ",
"type": "text",
"x": 648.5,
"y": 1598,
"width": 337,
"height": 50,
"angle": 0,
"strokeColor": "#000000",
"backgroundColor": "transparent",
"fillStyle": "hachure",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100,
"seed": 1334268465,
"version": 290,
"versionNonce": 153573663,
"isDeleted": false,
"text": "post = useSelector(selectPost(id))\ndispatch = useDispatch()",
"font": "20px Virgil",
"textAlign": "left",
"baseline": 43
},
{
"id": "-1lTgDZFjaXMS_OVcR978",
"type": "text",
"x": 1075.5,
"y": 1452.5,
"width": 445,
"height": 25,
"angle": 0,
"strokeColor": "#000000",
"backgroundColor": "transparent",
"fillStyle": "hachure",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100,
"seed": 1169203409,
"version": 227,
"versionNonce": 431159103,
"isDeleted": false,
"text": "selectPost = id => state => state.posts[id]",
"font": "20px Virgil",
"textAlign": "left",
"baseline": 18
},
{
"id": "2rq5SRDuc4B7K-3c7Z4tS",
"type": "text",
"x": 813,
"y": 1569.5,
"width": 34,
"height": 25,
"angle": 0,
"strokeColor": "#000000",
"backgroundColor": "transparent",
"fillStyle": "hachure",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100,
"seed": 2097970751,
"version": 28,
"versionNonce": 604803935,
"isDeleted": false,
"text": "id: 1",
"font": "20px Virgil",
"textAlign": "left",
"baseline": 18
},
{
"id": "Ji-z7uNQ--fMjMYbLeJJN",
"type": "text",
"x": 649.5,
"y": 1519.5,
"width": 227,
"height": 25,
"angle": 0,
"strokeColor": "#000000",
"backgroundColor": "transparent",
"fillStyle": "hachure",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100,
"seed": 1946839679,
"version": 134,
"versionNonce": 1641059153,
"isDeleted": false,
"text": "{post.message} // \"hi\"",
"font": "20px Virgil",
"textAlign": "left",
"baseline": 18
},
{
"id": "7Z2eMKuvGVdYlVEjF0_iy",
"type": "text",
"x": 648,
"y": 1657,
"width": 338,
"height": 80,
"angle": 0,
"strokeColor": "#000000",
"backgroundColor": "transparent",
"fillStyle": "hachure",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100,
"seed": 1150872849,
"version": 507,
"versionNonce": 2102355665,
"isDeleted": false,
"text": "{post.isFave ? ♥︎ : ♡} // \"♡\"\nonClick =\n () => dispatch(favePost(post.id))",
"font": "20px Virgil",
"textAlign": "left",
"baseline": 73
},
{
"id": "ubOB8lSOkq0MjrlmdM4bp",
"type": "text",
"x": 1047.5,
"y": 1413.5,
"width": 93,
"height": 25,
"angle": 0,
"strokeColor": "#000000",
"backgroundColor": "transparent",
"fillStyle": "hachure",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100,
"seed": 1320972415,
"version": 53,
"versionNonce": 1106548817,
"isDeleted": false,
"text": "Selectors",
"font": "20px Virgil",
"textAlign": "left",
"baseline": 18
},
{
"id": "1gyd4x_oNRhXGjyzsXIGD",
"type": "text",
"x": 1048.5,
"y": 1503.5,
"width": 163,
"height": 25,
"angle": 0,
"strokeColor": "#000000",
"backgroundColor": "transparent",
"fillStyle": "hachure",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100,
"seed": 1277972049,
"version": 123,
"versionNonce": 1121875185,
"isDeleted": false,
"text": "Action Creators",
"font": "20px Virgil",
"textAlign": "left",
"baseline": 18
},
{
"id": "makIwsOgllyV5zVsjn64j",
"type": "text",
"x": 1080.5,
"y": 1544.5,
"width": 555,
"height": 325,
"angle": 0,
"strokeColor": "#000000",
"backgroundColor": "transparent",
"fillStyle": "hachure",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100,
"seed": 614288159,
"version": 738,
"versionNonce": 17963569,
"isDeleted": false,
"text": "favePost = (id) =>\n async (dispatch, getState) => {\n let res, err;\n try {\n res = await POST('/api/posts/${id}/fave')\n } catch(err) {\n err = error\n dispatch({ type: 'posts/fave/err', payload: {id} })\n }\n if (res && !err) {\n dispatch({ type: 'posts/fave/ok', payload: {id} })\n }\n }",
"font": "20px Virgil",
"textAlign": "left",
"baseline": 318
},
{
"id": "q0CqVVIxji0LT89wAnX28",
"type": "rectangle",
"x": -44.75,
"y": 1886.75,
"width": 188,
"height": 137,
"angle": 0,
"strokeColor": "#000000",
"backgroundColor": "transparent",
"fillStyle": "hachure",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100,
"seed": 1218074353,
"version": 230,
"versionNonce": 218787921,
"isDeleted": false
},
{
"id": "klh9g8dlBaK3X61xCliN5",
"type": "text",
"x": -43.75,
"y": 1854.25,
"width": 56,
"height": 25,
"angle": 0,
"strokeColor": "#000000",
"backgroundColor": "transparent",
"fillStyle": "hachure",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100,
"seed": 1712295071,
"version": 138,
"versionNonce": 1934637375,
"isDeleted": false,
"text": "state",
"font": "20px Virgil",
"textAlign": "left",
"baseline": 18
},
{
"id": "Z3atQFDEEYVocqXrJSkjU",
"type": "rectangle",
"x": -71.75,
"y": 1848.75,
"width": 246,
"height": 319.25000000000006,
"angle": 0,
"strokeColor": "#000000",
"backgroundColor": "transparent",
"fillStyle": "hachure",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100,
"seed": 1844728017,
"version": 602,
"versionNonce": 1275505311,
"isDeleted": false
},
{
"id": "jw4T00Baynirip6ApUrtB",
"type": "text",
"x": -70.25,
"y": 1811.25,
"width": 53,
"height": 25,
"angle": 0,
"strokeColor": "#000000",
"backgroundColor": "transparent",
"fillStyle": "hachure",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100,
"seed": 1456644287,
"version": 131,
"versionNonce": 479508831,
"isDeleted": false,
"text": "store",
"font": "20px Virgil",
"textAlign": "left",
"baseline": 18
},
{
"id": "2xoUQe2aAyLg8OpZuyOZb",
"type": "diamond",
"x": 390.25,
"y": 1863.75,
"width": 67,
"height": 67,
"angle": 0,
"strokeColor": "#000000",
"backgroundColor": "transparent",
"fillStyle": "hachure",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100,
"seed": 766774961,
"version": 171,
"versionNonce": 792023057,
"isDeleted": false
},
{
"id": "F9REhVXGggGGi9FK4dwBV",
"type": "text",
"x": 382.25,
"y": 1818.25,
"width": 80,
"height": 25,
"angle": 0,
"strokeColor": "#000000",
"backgroundColor": "transparent",
"fillStyle": "hachure",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100,
"seed": 1113469151,
"version": 197,
"versionNonce": 93599103,
"isDeleted": false,
"text": "Provider",
"font": "20px Virgil",
"textAlign": "left",
"baseline": 18
},
{
"id": "mDsUw8_KiIWwxarpnODB_",
"type": "line",
"x": 461.25,
"y": 1897.75,
"width": 139,
"height": 49,
"angle": 0,
"strokeColor": "#000000",
"backgroundColor": "transparent",
"fillStyle": "hachure",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100,
"seed": 1048645777,
"version": 127,
"versionNonce": 1915697247,
"isDeleted": false,
"points": [
[
0,
0
],
[
139,
-49
]
],
"lastCommittedPoint": null
},
{
"id": "Fe51mfus0H85dVs-rp8ML",
"type": "line",
"x": 467.25,
"y": 1899.75,
"width": 127,
"height": 73,
"angle": 0,
"strokeColor": "#000000",
"backgroundColor": "transparent",
"fillStyle": "hachure",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100,
"seed": 843234559,
"version": 232,
"versionNonce": 1972317599,
"isDeleted": false,
"points": [
[
0,
0
],
[
127,
73
]
],
"lastCommittedPoint": null
},
{
"id": "XD4pbVCVonxvBkxLh6BLQ",
"type": "text",
"x": 614.75,
"y": 1835.25,
"width": 91,
"height": 25,
"angle": 0,
"strokeColor": "#000000",
"backgroundColor": "transparent",
"fillStyle": "hachure",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100,
"seed": 370333297,
"version": 185,
"versionNonce": 1350254545,
"isDeleted": false,
"text": "PostPage",
"font": "20px Virgil",
"textAlign": "left",
"baseline": 18
},
{
"id": "F8pEJdHhnXCND4oVIvz1B",
"type": "text",
"x": 607.75,
"y": 1963.25,
"width": 193,
"height": 25,
"angle": 0,
"strokeColor": "#000000",
"backgroundColor": "transparent",
"fillStyle": "hachure",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100,
"seed": 704693535,
"version": 271,
"versionNonce": 2008424895,
"isDeleted": false,
"text": "FavoritePostButton",
"font": "20px Virgil",
"textAlign": "left",
"baseline": 18
},
{
"id": "siivrU-R7GkoLL78gyXOg",
"type": "line",
"x": 180.25,
"y": 1896.75,
"width": 196,
"height": 0,
"angle": 0,
"strokeColor": "#000000",
"backgroundColor": "transparent",
"fillStyle": "hachure",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100,
"seed": 120643665,
"version": 151,
"versionNonce": 528817585,
"isDeleted": false,
"points": [
[
0,
0
],
[
196,
0
]
],
"lastCommittedPoint": null
},
{
"id": "-9NcCBZlKDw4QXx6nbfqK",
"type": "text",
"x": -39.25,
"y": 1887.25,
"width": 167,
"height": 125,
"angle": 0,
"strokeColor": "#000000",
"backgroundColor": "transparent",
"fillStyle": "hachure",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100,
"seed": 1762183487,
"version": 285,
"versionNonce": 1563005407,
"isDeleted": false,
"text": "posts\n 1: {\n message: 'hi',\n isFave: false\n }",
"font": "20px Virgil",
"textAlign": "left",
"baseline": 118
},
{
"id": "_VSpoGRZg8_XkyWw0OF0A",
"type": "text",
"x": 728.25,
"y": 1835.25,
"width": 34,
"height": 25,
"angle": 0,
"strokeColor": "#000000",
"backgroundColor": "transparent",
"fillStyle": "hachure",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100,
"seed": 531803697,
"version": 211,
"versionNonce": 290996113,
"isDeleted": false,
"text": "id: 1",
"font": "20px Virgil",
"textAlign": "left",
"baseline": 18
},
{
"id": "cg36XGP8AT_4LnYfoyWQ7",
"type": "text",
"x": 812.25,
"y": 1961.25,
"width": 34,
"height": 25,
"angle": 0,
"strokeColor": "#000000",
"backgroundColor": "transparent",
"fillStyle": "hachure",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100,
"seed": 845727103,
"version": 119,
"versionNonce": 1076356639,
"isDeleted": false,
"text": "id: 1",
"font": "20px Virgil",
"textAlign": "left",
"baseline": 18
},
{
"id": "DKVQpJ3Vyw9dIkUeuZzif",
"type": "text",
"x": 645.5,
"y": 1869.5,
"width": 27,
"height": 25,
"angle": 0,
"strokeColor": "#000000",
"backgroundColor": "transparent",
"fillStyle": "hachure",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100,
"seed": 1699646353,
"version": 10,
"versionNonce": 1847008863,
"isDeleted": false,
"text": "\"hi\"",
"font": "20px Virgil",
"textAlign": "left",
"baseline": 18
},
{
"id": "HDmbiHblINfpWe0UfAc8K",
"type": "text",
"x": 641.5,
"y": 2004,
"width": 43,
"height": 30,
"angle": 0,
"strokeColor": "#000000",
"backgroundColor": "transparent",
"fillStyle": "hachure",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100,
"seed": 1597971089,
"version": 26,
"versionNonce": 738509823,
"isDeleted": false,
"text": " \"♡\"",
"font": "20px Virgil",
"textAlign": "left",
"baseline": 23
},
{
"id": "WMyCMVdEvOkcdSWXhTtKD",
"type": "text",
"x": 711,
"y": 2011.5,
"width": 74,
"height": 25,
"angle": 0,
"strokeColor": "#000000",
"backgroundColor": "transparent",
"fillStyle": "hachure",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100,
"seed": 1881308191,
"version": 39,
"versionNonce": 1910866321,
"isDeleted": false,
"text": "CLICK!",
"font": "20px Virgil",
"textAlign": "left",
"baseline": 18
},
{
"id": "uEeT05L4V3BmsvKYgNoz_",
"type": "arrow",
"x": 799,
"y": 2023,
"width": 663,
"height": 81,
"angle": 0,
"strokeColor": "#000000",
"backgroundColor": "transparent",
"fillStyle": "hachure",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100,
"seed": 1282624529,
"version": 411,
"versionNonce": 324192735,
"isDeleted": false,
"points": [
[
0,
0
],
[
46,
29
],
[
17,
67
],
[
-109,
76
],
[
-276,
0
],
[
-617,
-5
]
],
"lastCommittedPoint": [
-617,
-5
]
},
{
"id": "B0Y6xDOFXE2mvYNWzms19",
"type": "text",
"x": 248,
"y": 2063.5,
"width": 240,
"height": 75,
"angle": 0,
"strokeColor": "#000000",
"backgroundColor": "transparent",
"fillStyle": "hachure",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100,
"seed": 394168209,
"version": 667,
"versionNonce": 967199391,
"isDeleted": false,
"text": "{ type: 'posts/fave/ok',\n payload: {id: 1}\n }",
"font": "20px Virgil",
"textAlign": "left",
"baseline": 68
},
{
"id": "97t9WWa51vUhEvR_bmaDw",
"type": "rectangle",
"x": -40,
"y": 2341.625,
"width": 188,
"height": 137,
"angle": 0,
"strokeColor": "#000000",
"backgroundColor": "transparent",
"fillStyle": "hachure",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100,
"seed": 1844701791,
"version": 312,
"versionNonce": 666200383,
"isDeleted": false
},
{
"id": "yZdK53793f1br8NzejUdt",
"type": "text",
"x": -39,
"y": 2309.125,
"width": 56,
"height": 25,
"angle": 0,
"strokeColor": "#000000",
"backgroundColor": "transparent",
"fillStyle": "hachure",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100,
"seed": 190689041,
"version": 220,
"versionNonce": 1738542641,
"isDeleted": false,
"text": "state",
"font": "20px Virgil",
"textAlign": "left",
"baseline": 18
},
{
"id": "TupIC35dSovIfSp_oiffa",
"type": "rectangle",
"x": -67,
"y": 2303.625,
"width": 246,
"height": 200,
"angle": 0,
"strokeColor": "#000000",
"backgroundColor": "transparent",
"fillStyle": "hachure",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100,
"seed": 635782783,
"version": 383,
"versionNonce": 1825827167,
"isDeleted": false
},
{
"id": "QRsoLXFTLiapd5Si_9LLq",
"type": "text",
"x": -65.5,
"y": 2266.125,
"width": 53,
"height": 25,
"angle": 0,
"strokeColor": "#000000",
"backgroundColor": "transparent",
"fillStyle": "hachure",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100,
"seed": 181904625,
"version": 213,
"versionNonce": 1774264337,
"isDeleted": false,
"text": "store",
"font": "20px Virgil",
"textAlign": "left",
"baseline": 18
},
{
"id": "f4jlOWCjdaqGcOz1MZm4w",
"type": "diamond",
"x": 395,
"y": 2318.625,
"width": 67,
"height": 67,
"angle": 0,
"strokeColor": "#000000",
"backgroundColor": "transparent",
"fillStyle": "hachure",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100,
"seed": 1805000351,
"version": 253,
"versionNonce": 1718445439,
"isDeleted": false
},
{
"id": "vlGRUNfk_OCwxIAeSvb_8",
"type": "text",
"x": 387,
"y": 2273.125,
"width": 80,
"height": 25,
"angle": 0,
"strokeColor": "#000000",
"backgroundColor": "transparent",
"fillStyle": "hachure",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100,
"seed": 1465376465,
"version": 279,
"versionNonce": 228914673,
"isDeleted": false,
"text": "Provider",
"font": "20px Virgil",
"textAlign": "left",
"baseline": 18
},
{
"id": "zW82TCpHrP4KqgkGQyyoG",
"type": "text",
"x": 619.5,
"y": 2290.125,
"width": 91,
"height": 25,
"angle": 0,
"strokeColor": "#000000",
"backgroundColor": "transparent",
"fillStyle": "hachure",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100,
"seed": 1088963295,
"version": 267,
"versionNonce": 2013483455,
"isDeleted": false,
"text": "PostPage",
"font": "20px Virgil",
"textAlign": "left",
"baseline": 18
},
{
"id": "65yF6j2ZpU0g6Xa6ZNOFt",
"type": "text",
"x": 612.5,
"y": 2418.125,
"width": 193,
"height": 25,
"angle": 0,
"strokeColor": "#000000",
"backgroundColor": "transparent",
"fillStyle": "hachure",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100,
"seed": 1389960849,
"version": 353,
"versionNonce": 2044915121,
"isDeleted": false,
"text": "FavoritePostButton",
"font": "20px Virgil",
"textAlign": "left",
"baseline": 18
},
{
"id": "0otaeoVW4AYQe_sEVFMqz",
"type": "text",
"x": -34.5,
"y": 2342.125,
"width": 167,
"height": 125,
"angle": 0,
"strokeColor": "#000000",
"backgroundColor": "transparent",
"fillStyle": "hachure",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100,
"seed": 1077486705,
"version": 375,
"versionNonce": 529975007,
"isDeleted": false,
"text": "posts\n 1: {\n message: 'hi',\n isFave: true\n }",
"font": "20px Virgil",
"textAlign": "left",
"baseline": 118
},
{
"id": "HQJSoFu87Z0hkGncEgeWF",
"type": "text",
"x": 733,
"y": 2290.125,
"width": 34,
"height": 25,
"angle": 0,
"strokeColor": "#000000",
"backgroundColor": "transparent",
"fillStyle": "hachure",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100,
"seed": 1454266143,
"version": 293,
"versionNonce": 1371221503,
"isDeleted": false,
"text": "id: 1",
"font": "20px Virgil",
"textAlign": "left",
"baseline": 18
},
{
"id": "T8QIQcCWQlkuxHU6LySQc",
"type": "text",
"x": 817,
"y": 2416.125,
"width": 34,
"height": 25,
"angle": 0,
"strokeColor": "#000000",
"backgroundColor": "transparent",
"fillStyle": "hachure",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100,
"seed": 1935502929,
"version": 201,
"versionNonce": 492172657,
"isDeleted": false,
"text": "id: 1",
"font": "20px Virgil",
"textAlign": "left",
"baseline": 18
},
{
"id": "AK8rGG1lI9kPF8322uQUS",
"type": "text",
"x": 650.25,
"y": 2324.375,
"width": 27,
"height": 25,
"angle": 0,
"strokeColor": "#000000",
"backgroundColor": "transparent",
"fillStyle": "hachure",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100,
"seed": 238295871,
"version": 92,
"versionNonce": 54728223,
"isDeleted": false,
"text": "\"hi\"",
"font": "20px Virgil",
"textAlign": "left",
"baseline": 18
},
{
"id": "oH_rsOfTu4XlozUnrvLyh",
"type": "text",
"x": 651.25,
"y": 2457.875,
"width": 33,
"height": 30,
"angle": 0,
"strokeColor": "#000000",
"backgroundColor": "transparent",
"fillStyle": "hachure",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100,
"seed": 857570353,
"version": 111,
"versionNonce": 592988337,
"isDeleted": false,
"text": "\"♥︎\"",
"font": "20px Virgil",
"textAlign": "left",
"baseline": 23
},
{
"id": "TrY2uY5jLZOsUzTmgCzPt",
"type": "arrow",
"x": 192,
"y": 2354,
"width": 194,
"height": 0,
"angle": 0,
"strokeColor": "#000000",
"backgroundColor": "transparent",
"fillStyle": "hachure",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100,
"seed": 2074582015,
"version": 88,
"versionNonce": 1813169585,
"isDeleted": false,
"points": [
[
0,
0
],
[
194,
0
]
],
"lastCommittedPoint": null
},
{
"id": "MbHaznW__-xoSty45oUar",
"type": "text",
"x": 217.5,
"y": 2324.5,
"width": 109,
"height": 25,
"angle": 0,
"strokeColor": "#000000",
"backgroundColor": "transparent",
"fillStyle": "hachure",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100,
"seed": 456917215,
"version": 51,
"versionNonce": 151352977,
"isDeleted": false,
"text": "new state!",
"font": "20px Virgil",
"textAlign": "left",
"baseline": 18
},
{
"id": "nSsE9WbopAQoPWYcgPaaC",
"type": "text",
"x": 364.5,
"y": 2397,
"width": 133,
"height": 20,
"angle": 0,
"strokeColor": "#000000",
"backgroundColor": "transparent",
"fillStyle": "hachure",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100,
"seed": 944337553,
"version": 98,
"versionNonce": 311886545,
"isDeleted": false,
"text": "store.getState()",
"font": "16px Virgil",
"textAlign": "left",
"baseline": 14
},
{
"id": "Ah08vYtl9Jke7eqXF700s",
"type": "arrow",
"x": 477.5,
"y": 2354,
"width": 121,
"height": 70,
"angle": 0,
"strokeColor": "#000000",
"backgroundColor": "transparent",
"fillStyle": "hachure",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100,
"seed": 793865713,
"version": 224,
"versionNonce": 847498961,
"isDeleted": false,
"points": [
[
0,
0
],
[
121,
70
]
],
"lastCommittedPoint": null
},
{
"id": "FpqIlciE_BtOvKOxboUZw",
"type": "line",
"x": 473.5,
"y": 2349.5,
"width": 134,
"height": 47,
"angle": 0,
"strokeColor": "#000000",
"backgroundColor": "transparent",
"fillStyle": "hachure",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100,
"seed": 2095057791,
"version": 323,
"versionNonce": 577520063,
"isDeleted": false,
"points": [
[
0,
0
],
[
134,
-47
]
],
"lastCommittedPoint": null
},
{
"id": "GDv3yxIV7Lx5BAKXUCeOG",
"type": "text",
"x": 684.5,
"y": 2057,
"width": 149,
"height": 40,
"angle": 0,
"strokeColor": "#000000",
"backgroundColor": "transparent",
"fillStyle": "hachure",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100,
"seed": 1825324657,
"version": 180,
"versionNonce": 2084168735,
"isDeleted": false,
"text": "api call triggered...\nsuccess!",
"font": "16px Virgil",
"textAlign": "left",
"baseline": 34
},
{
"id": "HZTCirpLRLh7PJ5c9T11l",
"type": "text",
"x": -50.5,
"y": 2038.5,
"width": 71,
"height": 25,
"angle": 0,
"strokeColor": "#000000",
"backgroundColor": "transparent",
"fillStyle": "hachure",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100,
"seed": 1961258591,
"version": 46,
"versionNonce": 793842641,
"isDeleted": false,
"text": "reducer",
"font": "20px Virgil",
"textAlign": "left",
"baseline": 18
},
{
"id": "40RLAoKRbxEZLCvZrnI2K",
"type": "text",
"x": -50.5,
"y": 2076,
"width": 217,
"height": 80,
"angle": 0,
"strokeColor": "#000000",
"backgroundColor": "transparent",
"fillStyle": "hachure",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100,
"seed": 2083007807,
"version": 359,
"versionNonce": 270855135,
"isDeleted": false,
"text": "case 'posts/fave/ok':\n id = action.payload.id\n state\n .posts[id].isFave = true",
"font": "16px Virgil",
"textAlign": "left",
"baseline": 74
},
{
"id": "y7XZ4OwHXMtxSHi_ZsJ0z",
"type": "text",
"x": 247.5,
"y": 2032,
"width": 123,
"height": 20,
"angle": 0,
"strokeColor": "#000000",
"backgroundColor": "transparent",
"fillStyle": "hachure",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100,
"seed": 530129009,
"version": 164,
"versionNonce": 1792949151,
"isDeleted": false,
"text": "dispatch(action)",
"font": "16px Virgil",
"textAlign": "left",
"baseline": 14
}
],
"appState": {
"viewBackgroundColor": "#ffffff"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment