{"_id":"@edsilv/stencil-redux","_rev":"2-06da896c868bd2ab91380321ae8b3ebd","name":"@edsilv/stencil-redux","dist-tags":{"latest":"0.1.2"},"versions":{"0.1.1":{"name":"@edsilv/stencil-redux","version":"0.1.1","description":"Stencil Redux - A simple redux-connector for Stencil-built web components","main":"dist/index.js","module":"dist/esm/es5/index.js","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","scripts":{"build":"stencil build","dev":"stencil build --es5 --dev --watch --serve --no-open --debug","deploy":"np","start":"npm run dev","test":"jest","lint":"tslint --config tslint.json --project tsconfig.json"},"husky":{"hooks":{"pre-commit":"npm run lint"}},"repository":{"type":"git","url":"git+https://github.com/ionic-team/stencil-redux.git"},"devDependencies":{"@stencil/core":"^0.18.0","@types/jest":"^24.0.5","@types/redux":"^3.6.0","husky":"^3.0.2","jest":"^24.1.0","np":"^5.0.0","redux":"^4.0.1","ts-jest":"^24.0.0","tslint":"^5.12.1","tslint-ionic-rules":"0.0.21"},"peerDependencies":{"redux":"^4.0.1"},"author":{"name":"Ionic Team"},"license":"MIT","bugs":{"url":"https://github.com/ionic-team/stencil-redux"},"homepage":"https://github.com/ionic-team/stencil-redux","gitHead":"ad74bf27c34cb0ef99cb335c4bf9f3c0e14f7131","_id":"@edsilv/stencil-redux@0.1.1","_nodeVersion":"10.16.0","_npmVersion":"6.10.2","dist":{"integrity":"sha512-J6ArTAknSpunDNMmT41tplg3SdK9kyk3o9nGSc/WMj73nB/m8W2eqYK+loyUrpcNZ3f8IBkcH+xUsdd90vk53w==","shasum":"1b09e48ca7277f9ee5e3261d06837eb485d23929","tarball":"https://registry.npmjs.org/@edsilv/stencil-redux/-/stencil-redux-0.1.1.tgz","fileCount":60,"unpackedSize":321778,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdXTjOCRA9TVsSAnZWagAAFmUQAJfpzofZUB8Hl7JAV90g\njnVF66BH6rKx6UheSpBx6Qf3Mc4U2GEbyWcTzxDxOjkPlwRUY0e/TYjuc+Ds\nnQKZBGTeFsiB+Ct6D6YvMFxs6D6xkgiEUGFA2pCz9RJ56yW5iclyLPFrjhFq\nJpThOHJTvSfamRqA75bCx/mfxeIKLO7am9VCoO7xzJYpPm7XzecFiPtfXHzz\nbT1b5oTaRH5OZFr3RTMi8vnialIq+MhCngpA5/K31rpnGKu91tFDJprwSVn4\nDiEB/q/eiXW0RYc8QjKDwDortnvmXtiDzsi+ZMRp6XkYI1+bdwHo8K6bC8+Y\neBG7LQ2/mymfRgn+l/LsXJ8D93RnISBuB74d9I1XjP96481E+C7jI/7915Bj\nK8hMp9RIpt8inugqdFl0IvsWj2XYD1MHeP7Twud0RL0fXAx1KkJRIlLKLUEa\nlJFJAKlDtdaw0SJkYz3cGxLRh0QPwM/RjjZv/XXPYSK1KEzFWg1mhCShvVmt\nFG4pUM0LwPmOmNQRD/IsQTs0j3K6E7rMhNYnhQBp4X09fZ4tsLuIpr8GXGZ2\n8aR1JlqLCj2BCtqNign+fdBCXWYkk9yVn5Ox2nwhCFKp072JSjarrYhsSUhJ\nHESE6M6JYsBh/X/z9MAblA8iz2n1E0vKmx49Czv1Fg62slHyiQKG2otQDbCF\nek59\r\n=96wQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA4viO3LYAw+XvVTU5WnO1hFY4jan6yiB8qaZaLYrdtPAiAkqTuPDJlKYCtETUlNDCBpTM9eMRdl2L7lN9fQB992CQ=="}]},"maintainers":[{"name":"edsilv-admin","email":"e.silverton@gmail.com"}],"_npmUser":{"name":"edsilv-admin","email":"e.silverton@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/stencil-redux_0.1.1_1566390477431_0.8573593141725699"},"_hasShrinkwrap":false},"0.1.2":{"name":"@edsilv/stencil-redux","version":"0.1.2","description":"Stencil Redux - A simple redux-connector for Stencil-built web components","main":"dist/index.js","module":"dist/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","scripts":{"build":"stencil build","dev":"stencil build --es5 --dev --watch --serve --no-open --debug","deploy":"np","start":"npm run dev","test":"jest","lint":"tslint --config tslint.json --project tsconfig.json"},"husky":{"hooks":{"pre-commit":"npm run lint"}},"repository":{"type":"git","url":"git+https://github.com/ionic-team/stencil-redux.git"},"devDependencies":{"@stencil/core":"1.12.2","redux":"^4.0.1"},"peerDependencies":{"redux":"^4.0.1"},"author":{"name":"Ionic Team"},"license":"MIT","bugs":{"url":"https://github.com/ionic-team/stencil-redux"},"homepage":"https://github.com/ionic-team/stencil-redux","gitHead":"ad74bf27c34cb0ef99cb335c4bf9f3c0e14f7131","_id":"@edsilv/stencil-redux@0.1.2","_nodeVersion":"10.19.0","_npmVersion":"6.13.4","dist":{"integrity":"sha512-TExy8/AfUqa5z/5fLD5eU8hYI4TFa+saBG3DH4c0R6j3FnXYrZHOXuGEZHXRjpVkeDeQkAwjEhjCgiTkj1dlCA==","shasum":"76e7bd3b8df9dec1251949e9bda4d0e63120348d","tarball":"https://registry.npmjs.org/@edsilv/stencil-redux/-/stencil-redux-0.1.2.tgz","fileCount":58,"unpackedSize":543681,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexlWCCRA9TVsSAnZWagAAof0P/2je6k8biBNhEp6ulmCu\njTRYJRHuKYGq2nOX2tgwSHYvmMWZDMQIb1339y0veM8JBCszMp6CufDHpJmq\nyaPIYQEtBoqgY4q4cLsiCfkgu277R9EUa6QBqz3OJx2JwGHeDf+3qQo/7w5F\noYsJdK4zSmkAXffQ3Zb3AYEdKxvM3J8Ioaq1pM7m0RLVaCQUu1ybruU/KxD5\n74GXl8Prr6blO/SADGcoV6nGdZl4JYLZhdUc49EFOnsuoIjkdABOmVYXC5+i\nwdXxs3YVa5tf+PvvS6FyI5+CSdbzrzScmYm22DvLm1JndHyRSon8X+AXALgQ\n4mqGaLm4UKrJwbJg+HxQ7zCsE++WAZ9UskdBFfSjafFxVATilDIk4dKwAKSP\nPfA4mlY9WvZ77yoOE6ZEkh88fh7RmgtGJcCKSTyEi+CmBDHn2HpDYZF2pHPM\nEUHeP8qhEUYh4rebruSNiXcRHfykArtFdq5azrEQ2k1Fj4VLKmmpXOvIpJzG\nYas8qOi/iMDYHZk+AWdGm6F4tV4UXbDE+1T8kfSclNla3MWwnKz/B7H2Yr+L\nHS2/AlcnB0OokqB27ud2j60M5N2pMpMhQr+FNN6bBonMPscGwcSWYScwMQWF\nj8OxYpGane4cxj4K3pXIKxqkUgEuNIdoUqdjRLyg2JmPmc+PN773RrIAWku9\ndC8T\r\n=0hxc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDldYN9s9XYPzt203PC4i4bQJxRVxU18Cf00AlWzdR74wIgLfs0G+QsD/WDuJK3eqo82AxiuseZ/Q2564za/+x0CiI="}]},"maintainers":[{"name":"edsilv-admin","email":"e.silverton@gmail.com"}],"_npmUser":{"name":"edsilv-admin","email":"e.silverton@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/stencil-redux_0.1.2_1590056322362_0.646193169730489"},"_hasShrinkwrap":false}},"time":{"created":"2019-08-21T12:27:57.261Z","0.1.1":"2019-08-21T12:27:57.600Z","modified":"2022-04-05T06:43:11.211Z","0.1.2":"2020-05-21T10:18:42.490Z"},"maintainers":[{"name":"edsilv-admin","email":"e.silverton@gmail.com"}],"description":"Stencil Redux - A simple redux-connector for Stencil-built web components","homepage":"https://github.com/ionic-team/stencil-redux","repository":{"type":"git","url":"git+https://github.com/ionic-team/stencil-redux.git"},"author":{"name":"Ionic Team"},"bugs":{"url":"https://github.com/ionic-team/stencil-redux"},"license":"MIT","readme":"## Stencil Redux\n\nA simple redux connector for Stencil-built web components inspired by [`react-redux`](https://github.com/reduxjs/react-redux).\n\n## Install\n\n```\nnpm install @stencil/redux\nnpm install redux\n```\n\n## Usage\n\nStencil Redux uses the [`redux`](https://github.com/reduxjs/redux/) library underneath. Setting up the store and defining actions, reducers, selectors, etc. should be familiar to you if you've used React with Redux.\n\n### Configure the Root Reducer\n\n```typescript\n// redux/reducers.ts\n\nimport { combineReducers } from 'redux';\n\n// Import feature reducers and state interfaces.\nimport { TodoState, todos } from './todos/reducers';\n\n// This interface represents app state by nesting feature states.\nexport interface RootState {\n  todos: TodoState;\n}\n\n// Combine feature reducers into a single root reducer\nexport const rootReducer = combineReducers({\n  todos,\n});\n```\n\n### Configure the Actions\n\n```typescript\n// redux/actions.ts\n\nimport { RootState } from './reducers';\n\n// Import feature action interfaces\nimport { TodoAction } from './todos/actions';\n\n// Export all feature actions for easier access.\nexport * from './todos/actions';\n\n// Combine feature action interfaces into a base type. Use union types to\n// combine feature interfaces.\n// https://www.typescriptlang.org/docs/handbook/advanced-types.html#union-types\nexport type Action = (\n  TodoAction\n);\n```\n\n### Configure the Store\n\n```typescript\n// redux/store.ts\n\nimport { Store, applyMiddleware, createStore } from 'redux';\nimport thunk from 'redux-thunk'; // add-on you may want\nimport logger from 'redux-logger'; // add-on you may want\n\nimport { RootState, rootReducer } from './reducers';\n\nexport const store: Store<RootState> = createStore(rootReducer, applyMiddleware(thunk, logger));\n```\n\n### Configure Store in Root Component\n\n```typescript\n\n// components/my-app/my-app.tsx\n\nimport { Store } from '@stencil/redux';\n\nimport { Action } from '../../redux/actions';\nimport { RootState } from '../../redux/reducers';\nimport { store } from '../../redux/store';\n\n@Component({\n  tag: 'my-app',\n  styleUrl: 'my-app.scss'\n})\nexport class MyApp {\n  @Prop({ context: 'store' }) store: Store<RootState, Action>;\n\n  componentWillLoad() {\n    this.store.setStore(store);\n  }\n}\n```\n\n### Map state and dispatch to props\n\n:memo: *Note*: Because the mapped props are technically changed *within* the component, `mutable: true` is required for `@Prop` definitions that utilize the store. See the [Stencil docs](https://stenciljs.com/docs/properties#prop-value-mutability) for info.\n\n```typescript\n// components/my-component/my-component.tsx\n\nimport { Store, Unsubscribe } from '@stencil/redux';\n\nimport { Action, changeName } from '../../redux/actions';\nimport { RootState } from '../../redux/reducers';\n\n@Component({\n  tag: 'my-component',\n  styleUrl: 'my-component.scss'\n})\nexport class MyComponent {\n  @Prop({ context: 'store' }) store: Store<RootState, Action>;\n  @Prop({ mutable: true }) name: string;\n\n  changeName!: typeof changeName;\n\n  unsubscribe!: Unsubscribe;\n\n  componentWillLoad() {\n    this.unsubscribe = this.store.mapStateToProps(this, state => {\n      const { user: { name } } = state;\n      return { name };\n    });\n\n    this.store.mapDispatchToProps(this, { changeName });\n  }\n\n  componentDidUnload() {\n    this.unsubscribe();\n  }\n\n  doNameChange(newName: string) {\n    this.changeName(newName);\n  }\n}\n```\n\n### Usage with `redux-thunk`\n\nSome Redux middleware, such as `redux-thunk`, alter the store's `dispatch()` function, resulting in type mismatches with mapped actions in your components.\n\nTo properly type mapped actions in your components (properties whose values are set by `store.mapDispatchToProps()`), you can use the following type:\n\n```typescript\nimport { ThunkAction } from 'redux-thunk';\n\nexport type Unthunk<T> = T extends (...args: infer A) => ThunkAction<infer R, any, any, any>\n  ? (...args: A) => R\n  : T;\n```\n\n#### Example\n\n```typescript\n// redux/user/actions.ts\n\nimport { ThunkAction } from 'redux-thunk';\n\nexport const changeName = (name: string): ThunkAction<Promise<void>, RootState, void, Action> => async (dispatch, getState) => {\n  await fetch(...); // some async operation\n};\n```\n\nIn the component below, the type of `this.changeName` is extracted from the action type to be `(name: string) => Promise<void>`.\n\n```typescript\n// components/my-component/my-component.tsx\n\nimport { changeName } from '../../redux/actions';\n\nexport class MyComponent {\n  changeName!: Unthunk<typeof changeName>;\n\n  componentWillLoad() {\n    this.store.mapDispatchToProps(this, { changeName });\n  }\n}\n```\n","readmeFilename":"README.md"}