{"_id":"@4react/store","_rev":"2-185f6232aa5bf4b9aa89f1c70de47480","name":"@4react/store","dist-tags":{"latest":"2020.1.3"},"versions":{"2020.1.2":{"name":"@4react/store","version":"2020.1.2","author":{"name":"Matteo Zanoncello"},"license":"ISC","main":"lib/store.js","module":"lib/store.module.js","types":"lib/types","scripts":{"clean":"rimraf lib","rollup":"rollup -c","build":"npm run clean && npm run rollup","story":"start-storybook -p 9009 -s .storybook/public","prepublish":"npm run build"},"dependencies":{"lodash":"^4.17.15","react":"^16.13.1"},"peerDependencies":{"react":"^16.13.1"},"devDependencies":{"@4react/eslint-config":"^2020.1.3","@babel/polyfill":"latest","@babel/preset-env":"^7.7.1","@babel/preset-react":"^7.7.0","@babel/preset-typescript":"^7.7.0","@storybook/addon-actions":"^5.3.17","@storybook/addon-knobs":"^5.3.17","@storybook/preset-typescript":"^1.2.0","@storybook/react":"^5.3.17","@types/lodash":"^4.14.149","@typescript-eslint/parser":"^2.26.0","babel-loader":"^8.0.6","eslint":"^6.6.0","rimraf":"^3.0.0","rollup":"^1.26.3","rollup-plugin-commonjs":"^10.1.0","rollup-plugin-eslint":"^7.0.0","rollup-plugin-postcss":"^2.0.3","rollup-plugin-typescript2":"^0.25.2","ts-loader":"^6.2.1","typescript":"^3.7.5"},"gitHead":"8582f00e23dd05511769586f1a5efff7f46ef02f","description":"A Redux-like state container for React Applications.","_id":"@4react/store@2020.1.2","_npmVersion":"6.2.0","_nodeVersion":"10.15.3","_npmUser":{"name":"matteozanoncello","email":"zanomate@gmail.com"},"dist":{"integrity":"sha512-6cmnW1Qs8wAyTsQSBQjxrh6m08N7nJ4oAsuGnZfa/D9LCqtUU9d/S3InPfDSMjwkZB/tIoDWxrDmW3FRjghNmA==","shasum":"fb806effa50d2e08c38ad0ab4951123aca9e5f18","tarball":"https://registry.npmjs.org/@4react/store/-/store-2020.1.2.tgz","fileCount":10,"unpackedSize":13038,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqn9iCRA9TVsSAnZWagAANOEQAIAsNI17HQTCVcMkP/Za\n639/Iw17eQfPDMn6/ptou0Ys6WWu9LpkFIWT25xxAWQc+QIAGas35a0USl7k\nq68G+DRg9qWM//sviJJSU5T8bKelJve6yk3ZlHztjCgweYPPfVNIZCdbKVH3\nUIbFxJ1IAxeNFV31lWGDqEtw27vPS7pM+e+OntCY0xEG5EB81LyNA88vcoIK\n0zdWzbit5ramzCWVAbfkR0ziXUGHOXoQ+g749SqI4nWRU0by9dKK2taylDXV\nFtFeVhpV5T4Pym0ZeTP6xnnNk2GyKIXtic97Z73+yMptWDEKUHbAg+WWkFtS\nAS+2vijadNdt9sO32w8mdEcMrAIXWCIMUWF/WpqRIhn35mtDqBsox9fzRHO2\n+KAuT/EbTZnEiow/mE+tpPyKugnTWXW9ZILHkfTEy5kD7LgOePq9JcSSlyEk\nFl239Eu7T15QUSoqvNygaXsAacxrkiLoiG9sszCqatG8OENM5a1rA74rBof5\n/fxLA8jtUDfG6mgnhiDWL0D3jTP14rstz4+gNlYTR0EFU4OAvMiXOIhsAV/e\nYcNZBcw1bB5aCIh5QttJth32yfOY7sIMd8wFCjaTeIiGKqyX2T0Hix0rlhdm\nmzhQP/10xkEWBc8b4gjPQwaRB5snZXUWOPY9WLQUouHkJZpRu1ztM2d0sPhI\nggG/\r\n=//bC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF6/IhT3VfY2crbusYoIOFYDuXnp87NJ7nV8YCajuI9ZAiBE3bgR8dskvlt7OWVo2kTzVsnwEYsgvffKOfjj0/tWWg=="}]},"maintainers":[{"name":"matteozanoncello","email":"zanomate@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/store_2020.1.2_1588232033812_0.3799265548031081"},"_hasShrinkwrap":false},"2020.1.3":{"name":"@4react/store","version":"2020.1.3","author":{"name":"Matteo Zanoncello"},"license":"ISC","main":"lib/store.js","module":"lib/store.module.js","types":"lib/types","scripts":{"clean":"rimraf lib","rollup":"rollup -c","build":"npm run clean && npm run rollup","story":"start-storybook -p 9009 -s .storybook/public"},"dependencies":{"lodash":"^4.17.15","react":"^16.13.1"},"peerDependencies":{"react":"^16.13.1"},"devDependencies":{"@4react/eslint-config":"^2020.1.3","@babel/polyfill":"latest","@babel/preset-env":"^7.7.1","@babel/preset-react":"^7.7.0","@babel/preset-typescript":"^7.7.0","@storybook/addon-actions":"^5.3.17","@storybook/addon-knobs":"^5.3.17","@storybook/preset-typescript":"^1.2.0","@storybook/react":"^5.3.17","@types/lodash":"^4.14.149","@typescript-eslint/parser":"^2.26.0","babel-loader":"^8.0.6","eslint":"^6.6.0","rimraf":"^3.0.0","rollup":"^1.26.3","rollup-plugin-commonjs":"^10.1.0","rollup-plugin-eslint":"^7.0.0","rollup-plugin-postcss":"^2.0.3","rollup-plugin-typescript2":"^0.25.2","ts-loader":"^6.2.1","typescript":"^3.7.5"},"gitHead":"8582f00e23dd05511769586f1a5efff7f46ef02f","description":"A Redux-like state container for React Applications.","_id":"@4react/store@2020.1.3","_nodeVersion":"14.0.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-xx3LM+dBnwhV9Ee+d+/JJSN1ADaI6PqlYTzfNfukz/WMpF37H71R6ead507ilvwgxsgD08IcP6M7pNsrpinjrQ==","shasum":"87d0894683983b9252f5e6670299f7bb6061aff0","tarball":"https://registry.npmjs.org/@4react/store/-/store-2020.1.3.tgz","fileCount":10,"unpackedSize":12874,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesDkUCRA9TVsSAnZWagAAt9oP/1yeQHmBl3Keumj8bcJD\n8/mKVv2Cxk4n8P9NBV0l7tAdoAbMrEoHcs/n/c1r55evSKcvGxFahSrMi9f+\n+wNOHj27yTOR6MxpG+Hd4BaNGA2SNNlIDVew2uusD1EmBWVL0FFqX0fM3SCD\nt3xMthJv78KeyMn377SlJhZe5nXYcmMlSq9/vC4wqXaQze392AjcmrfxMz8F\njmfCL3Fpu74gV/ipDKW9K+k1ST97kzur+W79mYk7FUT4pW22AoelYkEB4EjD\nYnpvlqWOiy+TkadLvClCKKWMO5ll8Fs/oMDz8Vus/STUAprgsiRtC/aDM3fE\nEoaBrRkOgY7DA3UaTNqawt1BnTYOH+X1TW+0QsVgCaWnc224z1nCFuKd8S+c\ncVVx7+wjiVU2pWH9hxuOjXrFLpf6qWlqameH2eT4dRK5d5u1IqnhJLgKdfXF\nr7i//g+97Hb8fd8xMhzTDqcqCzEmA7SRhxcfKapb4dlPs0xiWqBLY/L5fxE9\no7OIgmDwyX92x9X98RoQL1Bhwp4aGrAIQ/03KRMKHb0/l3JlC0JcOnV2Q001\neWb/WlUyy8HMjlvVjckHQMMYH9VJozs5JBvVH0GcXJwuKaeFyxspXuAptJy5\neJPv0c2im5jYQRxgbhcxgW7/7NEMC0lKRj2xuNbWXeHWbxWZEbrF1A1psGRN\ne1jt\r\n=jvHe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCuwQmP8q6vODrXTeHAkCV8N5K0jLz7wSX+PqAVZIkvDgIgfgRsnAKtNC8KCg3Ayx/nlHvMnFRiKSIIu1nZCxKyz7M="}]},"maintainers":[{"name":"matteozanoncello","email":"zanomate@gmail.com"}],"_npmUser":{"name":"matteozanoncello","email":"zanomate@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/store_2020.1.3_1588607251574_0.9489802199845827"},"_hasShrinkwrap":false}},"time":{"created":"2020-04-30T07:33:53.570Z","2020.1.2":"2020-04-30T07:33:53.926Z","modified":"2022-04-04T10:47:21.997Z","2020.1.3":"2020-05-04T15:47:31.914Z"},"maintainers":[{"name":"matteozanoncello","email":"zanomate@gmail.com"}],"description":"A Redux-like state container for React Applications.","author":{"name":"Matteo Zanoncello"},"license":"ISC","readme":"# @4react / store\r\n\r\nA Redux-like state container for React Applications.\r\n\r\n#### NOTE\r\nThis package is largely inspired by [Redux](https://github.com/reduxjs/redux). Please consider to support their work.\r\n\r\n## Usage\r\n\r\n### Import dependency\r\n\r\n```\r\nnpm i @4react/store\r\n```\r\n\r\n### Create Store\r\nUse the ***createStore*** utility to create both the store provider and its corresponding consumer hook,\r\npassing the main reducer of the store to it.\r\n\r\n```jsx\r\nimport { createStore } from '@4react/store'\r\n\r\nexport const [ MyStore, useMyStore ] = createStore(myStoreReducer)\r\n```\r\n\r\n### Provide Store\r\nUse the ***store provider*** to provide the store down to your application.\r\n\r\n```jsx\r\nimport { MyStore } from 'myStore'\r\n\r\nconst App = () => {\r\n  return (\r\n    <MyStore>\r\n      <MyComponent />\r\n    </MyStore>\r\n  )\r\n}\r\n```\r\n\r\n### Use store\r\nUse the ***store custom hook*** to **retrieve store data** and **dispatch actions**\r\n\r\n```jsx\r\nconst MyInnerComponent = () => {\r\n  const { data, dispatch } = useMyStore()\r\n\r\n  const onClick = () => {\r\n     dispatch({ type: 'YOUR_ACTION' })\r\n  }\r\n\r\n  return (\r\n    <>\r\n      <span>{data}</span>\r\n      <button onClick={onClick}>\r\n        click here\r\n      </button>\r\n    </>\r\n  )\r\n}\r\n```\r\n\r\n## API\r\n\r\n### createStore()\r\n\r\nCreates both a store provider and its corresponding hook.\r\n\r\nDepending on the type of state management you want to implement,\r\nyou can decide to keep a single global store,\r\nrather than creates multiple stores and provide them down to different sections of your application.\r\n\r\nYou can also use multiple nested stores for different manners.\r\n\r\n```js\r\ncreateStore(reducer, [preloadedState], [enhancer])\r\n```\r\n\r\n| Param | Type | Default | Description |\r\n| --- | --- | --- | --- |\r\n| reducer | Function | - | A reducing function that returns the next state, given the current state and an action. |\r\n| preloadedState | any | *computed* | ***optional***. The initial state. If not specify the initial state is automatically computed from reducers state default value. |\r\n| enhancer | Function | - | ***optional***. The store enhancer. You may optionally specify it to enhance the store with third-party capabilities. |\r\n\r\nReturns an array containing 2 different elements:\r\n1. The custom store provider (see [Store Provider](#store-provider))\r\n2. The custom consumer hook. (see [Consumer Hook](#consumer-hook))\r\n\r\n#### Store Provider\r\n\r\nThe Store Provider is used to provide global store to the entire application.\r\nIt is most commonly used inside app main component.\r\n\r\n```js\r\nconst App = () => {\r\n  return (\r\n    <MyStore>\r\n      ...\r\n    </MyStore>\r\n  );\r\n};\r\n```\r\n\r\n| Param | Type | Default | Description |\r\n| --- | --- | --- | --- |\r\n| data | any | - | ***optional*** You can use this prop to force the providing of specific store data. It is most commonly used for **testing** purpose. |\r\n\r\n#### Consumer Hook\r\n\r\nThe Consumer Hook is used to retrieve both the actual store state\r\nand the dispatch function.\r\n\r\n```js\r\nconst { data, dispatch } = useMyStore()\r\n\r\nconst { data } = useMyStore(store => store.counter)\r\n```\r\n\r\n| Param | Type | Default | Description |\r\n| --- | --- | --- | --- |\r\n| selector | Function | - | ***optional*** Use to retrieve a custom section of the store state. |\r\n\r\n| Return (object) | Type | Description |\r\n| --- | --- | --- |\r\n| data | any | The actual store state or a selection of it. |\r\n| dispatch | Function | The dispatch function, used to dispatch actions |\r\n\r\n### combineReducers()\r\n\r\nSimilar to *Redux*'s combineReducers, it creates a new reducer starting from\r\na map of reducers. The resulting function will be able to reduce a state\r\nwith the same shape of the map of reducers passed to it.\r\n\r\n```js\r\nconst todos = combineReducers({\r\n  all: allReducer,\r\n  checked: checkedReducer\r\n})\r\n```\r\n\r\nArguments:\r\n1. `reducers` (object): the map of reducers to be combined together.\r\n2. \\[`initialValue`\\] (any): This parameter is **optional**. If not specify\r\nthe state default value is automatically computed from reducers state default\r\nstate value inside the passed map.\r\n\r\n| Param | Type | Default | Description |\r\n| --- | --- | --- | --- |\r\n| reducers | object<string,Function> | - | The map of reducers to be combined together. |\r\n| initialValue | any | *computed* | ***optional*** If not specify, it is automatically computed from reducers default states value inside the passed map. |\r\n","readmeFilename":"README.md"}