You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
"description": "<p>Similar to React useState(), returns selected redux state, and action dispatching function, as the first and second elements of an array.</p> <p>Takes an optional shouldUpdate callback (see useSelect), which does a shallow comparison of previous and current selected state by default. The update callback returned expects to be called with an object, and will cause a dispatch: { type: 'DOMAIN_UPDATE', domain, // the passed domain update, // object passed to update }</p> <p>Note: the boilerplate redux reducer created with <code>arcli component</code> will target action dispatched from this hoook.</p>",
1425
+
"parameter": {
1426
+
"fields": {
1427
+
"Parameter": [
1428
+
{
1429
+
"group": "Parameter",
1430
+
"type": "Function",
1431
+
"optional": true,
1432
+
"field": "select",
1433
+
"description": "<p>Optional select callback (see useSelect), which selects for the domain by default.</p>"
1434
+
},
1435
+
{
1436
+
"group": "Parameter",
1437
+
"type": "Function",
1438
+
"optional": true,
1439
+
"field": "shouldUpdate",
1440
+
"description": "<p>Optional shouldUpdate callback (see useSelect), which does a shallow comparison of previous and current selected state by default.</p>"
"description": "<p>React hook for subscribing to only the updates from Redux store that you care about, and no more. This is superior to <code>react-redux</code> connect, in that your component will not update on every dispatch, only those state changes you have specifically targeted.</p>",
1548
+
"parameter": {
1549
+
"fields": {
1550
+
"Parameter": [
1551
+
{
1552
+
"group": "Parameter",
1553
+
"type": "Mixed",
1554
+
"optional": false,
1555
+
"field": "params",
1556
+
"description": "<ol> <li>Callback function taking current state object from Redux store, and returning what you care about, or</li> <li>an Object with <code>select</code>, <code>shouldUpdate</code> and <code>returnMode</code> props.</li> </ol>"
1557
+
},
1558
+
{
1559
+
"group": "Parameter",
1560
+
"type": "Function",
1561
+
"optional": false,
1562
+
"field": "params.select",
1563
+
"description": "<p>Callback function taking current state object from Redux store, and returning what you care about.</p>"
1564
+
},
1565
+
{
1566
+
"group": "Parameter",
1567
+
"type": "Function",
1568
+
"optional": true,
1569
+
"field": "params.shouldUpdate",
1570
+
"description": "<p>Callback function object with 2 properties <code>newState</code> and <code>prevState</code>, containing the current results of the select function, and the previous results of the select function, respectively. Returns true if your component should update, otherwise false. By default, <code>useSelect</code> will do a shallow comparison.</p>"
1571
+
},
1572
+
{
1573
+
"group": "Parameter",
1574
+
"type": "String",
1575
+
"optional": true,
1576
+
"field": "params.returnMode",
1577
+
"defaultValue": "state",
1578
+
"description": "<p><code>state</code> to get the current state, <code>ref</code> to get the whole React reference object (for more realtime updates), and <code>get</code> for a getter function that takes object-path</p>"
1579
+
}
1580
+
]
1581
+
}
1582
+
},
1583
+
"name": "useSelect",
1584
+
"group": "ReactHook",
1585
+
"examples": [
1586
+
{
1587
+
"title": "Simple.js",
1588
+
"content": "import React from 'react';\nimport { useSelect } from '@atomic-reactor/use-select';\n\n// given a Redux state of { \"Simple\": {\"foo\": { \"bar\": \"baz\" }}}\nexport default () => {\n // Simple select callback: will update the component only when state.Simple.foo.bar changes no more.\n const baz = useSelect(state => state.Simple.foo.bar);\n return (\n <div>\n {baz}\n </div>\n );\n};",
1589
+
"type": "json"
1590
+
},
1591
+
{
1592
+
"title": "Advanced.js",
1593
+
"content": "import React from 'react';\nimport { useSelect } from '@atomic-reactor/use-select';\n\n// given a Redux state of {\n// \"Advanced\": {\n// \"foo\": { \"bar\": \"baz\" },\n// \"hello\": \"world\",\n// }\n//}\nexport default () => {\n // Advanced select callback: will update the component only conditions of shouldUpdate are true.\n // All other Redux state changes are ignored.\n const Advanced = useSelect({\n select: state => state.Advanced,\n\n shouldUpdate: ({newState, prevState}) => {\n // newState and prevState are current and previous outcome of select callback above\n return newState.foo.bar !== prevState.foo.bar || newState.hello !== prevState.hello;\n },\n });\n\n return (\n <div>\n {Advanced.foo.bar}\n {Advanced.hello}\n </div>\n );\n};",
"description": "<p>Just gimme the store damnit! This React hook provides the Redux store when used on a component declared within the Store Provider.</p>",
"description": "<p>ec, short for "easy connect" is a stripped down version of the redux <code>connect</code> function, which will provide your component with any Redux state properties under the name matching your component class (if applicable), as well as a <code>getState</code> function property.</p>",
3396
+
"name": "ec",
3397
+
"parameter": {
3398
+
"fields": {
3399
+
"Parameter": [
3400
+
{
3401
+
"group": "Parameter",
3402
+
"type": "Component",
3403
+
"optional": false,
3404
+
"field": "Component",
3405
+
"description": "<p>the React component to be decorated with Redux state.</p>"
3406
+
},
3407
+
{
3408
+
"group": "Parameter",
3409
+
"type": "domain",
3410
+
"optional": true,
3411
+
"field": "domain",
3412
+
"description": "<p>domain or object path to get from state. if not provided, will used Component.name property.</p>"
3413
+
}
3414
+
]
3415
+
}
3416
+
},
3417
+
"group": "Reactium.Utilities",
3418
+
"examples": [
3419
+
{
3420
+
"title": "MyComponent/index.js",
3421
+
"content": "import MyComponent from './MyComponent';\nimport { ec } from '@atomic-reactor/use-select';\n\nexport ec(MyComponent);",
3422
+
"type": "json"
3423
+
},
3424
+
{
3425
+
"title": "MyComponent/MyComponent.js",
3426
+
"content": "import React, { Component } from 'react';\n\nclass MyComponent extends Component {\n render() {\n // getState prop provided by ec\n const state = this.props.getState();\n // foo property provided by ec\n const foo = this.props.foo;\n\n // Given that Redux store has an property MyComponent with property `foo`\n return (\n <div>\n {state.MyComponent.foo}\n {foo}\n </div>\n );\n }\n}\n\nMyComponent.defaultProps = {\n getState: () => {},\n foo: null,\n};\n\nexport default MyComponent;",
"description": "<p>Similar to React useState(), returns selected redux state, and action dispatching function, as the first and second elements of an array.</p> <p>Takes an optional shouldUpdate callback (see useSelect), which does a shallow comparison of previous and current selected state by default. The update callback returned expects to be called with an object, and will cause a dispatch: { type: 'DOMAIN_UPDATE', domain, // the passed domain update, // object passed to update }</p> <p>Note: the boilerplate redux reducer created with <code>arcli component</code> will target action dispatched from this hoook.</p>",
1425
+
"parameter": {
1426
+
"fields": {
1427
+
"Parameter": [
1428
+
{
1429
+
"group": "Parameter",
1430
+
"type": "Function",
1431
+
"optional": true,
1432
+
"field": "select",
1433
+
"description": "<p>Optional select callback (see useSelect), which selects for the domain by default.</p>"
1434
+
},
1435
+
{
1436
+
"group": "Parameter",
1437
+
"type": "Function",
1438
+
"optional": true,
1439
+
"field": "shouldUpdate",
1440
+
"description": "<p>Optional shouldUpdate callback (see useSelect), which does a shallow comparison of previous and current selected state by default.</p>"
"description": "<p>React hook for subscribing to only the updates from Redux store that you care about, and no more. This is superior to <code>react-redux</code> connect, in that your component will not update on every dispatch, only those state changes you have specifically targeted.</p>",
1548
+
"parameter": {
1549
+
"fields": {
1550
+
"Parameter": [
1551
+
{
1552
+
"group": "Parameter",
1553
+
"type": "Mixed",
1554
+
"optional": false,
1555
+
"field": "params",
1556
+
"description": "<ol> <li>Callback function taking current state object from Redux store, and returning what you care about, or</li> <li>an Object with <code>select</code>, <code>shouldUpdate</code> and <code>returnMode</code> props.</li> </ol>"
1557
+
},
1558
+
{
1559
+
"group": "Parameter",
1560
+
"type": "Function",
1561
+
"optional": false,
1562
+
"field": "params.select",
1563
+
"description": "<p>Callback function taking current state object from Redux store, and returning what you care about.</p>"
1564
+
},
1565
+
{
1566
+
"group": "Parameter",
1567
+
"type": "Function",
1568
+
"optional": true,
1569
+
"field": "params.shouldUpdate",
1570
+
"description": "<p>Callback function object with 2 properties <code>newState</code> and <code>prevState</code>, containing the current results of the select function, and the previous results of the select function, respectively. Returns true if your component should update, otherwise false. By default, <code>useSelect</code> will do a shallow comparison.</p>"
1571
+
},
1572
+
{
1573
+
"group": "Parameter",
1574
+
"type": "String",
1575
+
"optional": true,
1576
+
"field": "params.returnMode",
1577
+
"defaultValue": "state",
1578
+
"description": "<p><code>state</code> to get the current state, <code>ref</code> to get the whole React reference object (for more realtime updates), and <code>get</code> for a getter function that takes object-path</p>"
1579
+
}
1580
+
]
1581
+
}
1582
+
},
1583
+
"name": "useSelect",
1584
+
"group": "ReactHook",
1585
+
"examples": [
1586
+
{
1587
+
"title": "Simple.js",
1588
+
"content": "import React from 'react';\nimport { useSelect } from '@atomic-reactor/use-select';\n\n// given a Redux state of { \"Simple\": {\"foo\": { \"bar\": \"baz\" }}}\nexport default () => {\n // Simple select callback: will update the component only when state.Simple.foo.bar changes no more.\n const baz = useSelect(state => state.Simple.foo.bar);\n return (\n <div>\n {baz}\n </div>\n );\n};",
1589
+
"type": "json"
1590
+
},
1591
+
{
1592
+
"title": "Advanced.js",
1593
+
"content": "import React from 'react';\nimport { useSelect } from '@atomic-reactor/use-select';\n\n// given a Redux state of {\n// \"Advanced\": {\n// \"foo\": { \"bar\": \"baz\" },\n// \"hello\": \"world\",\n// }\n//}\nexport default () => {\n // Advanced select callback: will update the component only conditions of shouldUpdate are true.\n // All other Redux state changes are ignored.\n const Advanced = useSelect({\n select: state => state.Advanced,\n\n shouldUpdate: ({newState, prevState}) => {\n // newState and prevState are current and previous outcome of select callback above\n return newState.foo.bar !== prevState.foo.bar || newState.hello !== prevState.hello;\n },\n });\n\n return (\n <div>\n {Advanced.foo.bar}\n {Advanced.hello}\n </div>\n );\n};",
"description": "<p>Just gimme the store damnit! This React hook provides the Redux store when used on a component declared within the Store Provider.</p>",
"description": "<p>ec, short for "easy connect" is a stripped down version of the redux <code>connect</code> function, which will provide your component with any Redux state properties under the name matching your component class (if applicable), as well as a <code>getState</code> function property.</p>",
3396
+
"name": "ec",
3397
+
"parameter": {
3398
+
"fields": {
3399
+
"Parameter": [
3400
+
{
3401
+
"group": "Parameter",
3402
+
"type": "Component",
3403
+
"optional": false,
3404
+
"field": "Component",
3405
+
"description": "<p>the React component to be decorated with Redux state.</p>"
3406
+
},
3407
+
{
3408
+
"group": "Parameter",
3409
+
"type": "domain",
3410
+
"optional": true,
3411
+
"field": "domain",
3412
+
"description": "<p>domain or object path to get from state. if not provided, will used Component.name property.</p>"
3413
+
}
3414
+
]
3415
+
}
3416
+
},
3417
+
"group": "Reactium.Utilities",
3418
+
"examples": [
3419
+
{
3420
+
"title": "MyComponent/index.js",
3421
+
"content": "import MyComponent from './MyComponent';\nimport { ec } from '@atomic-reactor/use-select';\n\nexport ec(MyComponent);",
3422
+
"type": "json"
3423
+
},
3424
+
{
3425
+
"title": "MyComponent/MyComponent.js",
3426
+
"content": "import React, { Component } from 'react';\n\nclass MyComponent extends Component {\n render() {\n // getState prop provided by ec\n const state = this.props.getState();\n // foo property provided by ec\n const foo = this.props.foo;\n\n // Given that Redux store has an property MyComponent with property `foo`\n return (\n <div>\n {state.MyComponent.foo}\n {foo}\n </div>\n );\n }\n}\n\nMyComponent.defaultProps = {\n getState: () => {},\n foo: null,\n};\n\nexport default MyComponent;",
0 commit comments