{"_id":"@boldpenguin/stencil-redux","_rev":"7-76a90bd044b3ab0896c82f96ef2ce8cf","name":"@boldpenguin/stencil-redux","dist-tags":{"latest":"0.2.2"},"versions":{"0.2.1":{"name":"@boldpenguin/stencil-redux","version":"0.2.1","author":{"name":"Ionic Team"},"license":"MIT","_id":"@boldpenguin/stencil-redux@0.2.1","maintainers":[{"name":"szechyjs","email":"jared.szechy@gmail.com"}],"homepage":"https://github.com/BoldPenguin/stencil-redux","bugs":{"url":"https://github.com/BoldPenguin/stencil-redux"},"dist":{"shasum":"7a30ef878f9290155878522d0c3fbebc319540b2","tarball":"https://registry.npmjs.org/@boldpenguin/stencil-redux/-/stencil-redux-0.2.1.tgz","fileCount":61,"integrity":"sha512-17bAgDDGAaojqqPxHyk5N+p5RWSp2hM0eUzuhdRB2WeQCTQj9+wMqUulwIG8RtS2ZYzkgZ675K3yl0qcCLZNyw==","signatures":[{"sig":"MEUCIEYPofnJD+ouCWFDg9eI6aMcI5slAPbBJsKJsbIBdEthAiEA6vpEhxb/4iezsp+ta82mFXNA5KJSO/uPdQDrlvBLve0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321402,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1TYwCRA9TVsSAnZWagAApREQAILFtho0hY/O1CmLlvxL\n2t/2gbD9AFwoomoqy3WM0V7ZZJf8E3B+kR+cxQ01fOQhF0d+DH5LIOmw2Wgp\nfaePDLGoH7M1Y5O0G/OKOdwfhRVItsOMnHk1ACv7MlRBOGOFtfCJ7Z5OdY/J\n0uW++pZUJyWGCdkDYBh4ZGpYXEuf9NshtrfLm45+ZE4LyoTuE8QJyNmbOykO\nbuM9ZSq550EbHvEG0w1suE+hZ8EMlyGf8zYLb7TCjMEpwz0jv2OqQFAkLkpF\nuAJWQCvr5C46x9OquEFVtaIDqHlLSZ+eI/oYURkxxXRLKgDtu3M5iXp7UK9X\nm8kMiJz07LUFUotuvMlVuGqSanbS/fX1dTIhPL729rbJbcV5uOOk/Bn1qEnZ\nL6wwXv7sN0vOaI1YT23c6Gt71fkR1j6tjgIVUQ278kygV2F49Ry1B3vHTN0O\nXtNai0Sr+Sq+pQB+OoS9KZTZXVHtkMdftsHnOF2kJwu71pO3gqe4/J3ccDnq\nypWohlurTUSm71/quia+9e3wthmjiKBrd+uPbR8wOqVQmJ5mg++w+GPxqzYk\nVfPzLDtnjxFyLqk33V3ZDD7l9wHZuehbNaYVP8nzQaG9rA0w0WP8H8HGp0va\nICfmV6q0ycZzZtS+agZN8Q0k0S+gcnrFqtco2SEC0vXzVmL+umt5Aty6eXR7\nv7X9\r\n=22/T\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","husky":{"hooks":{"pre-commit":"npm run lint"}},"types":"dist/types/index.d.ts","module":"dist/esm/es5/index.js","gitHead":"a2a9e80fe0c254e223d5c82800f99cb5dab56155","scripts":{"dev":"stencil build --es5 --dev --watch --serve --no-open --debug","lint":"tslint --config tslint.json --project tsconfig.json","test":"jest","build":"stencil build","start":"npm run dev","deploy":"np"},"_npmUser":{"name":"szechyjs","email":"jared.szechy@gmail.com"},"collection":"dist/collection/collection-manifest.json","repository":{"url":"git+https://github.com/BoldPenguin/stencil-redux.git","type":"git"},"_npmVersion":"6.14.5","description":"Stencil Redux - A simple redux-connector for Stencil-built web components","directories":{},"_nodeVersion":"12.17.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"np":"^5.0.0","jest":"^25.0.0","husky":"^4.2.1","redux":"^4.0.1","tslint":"^5.12.1","ts-jest":"^25.1.0","@types/jest":"^25.0.0","@stencil/core":"^0.18.0","semantic-release":"^17.0.8","tslint-ionic-rules":"0.0.21","@semantic-release/git":"^9.0.0","@semantic-release/exec":"^5.0.0","@semantic-release/changelog":"^5.0.1","conventional-changelog-conventionalcommits":"^4.3.0"},"peerDependencies":{"redux":"^4.0.4"},"_npmOperationalInternal":{"tmp":"tmp/stencil-redux_0.2.1_1591031344064_0.4301371223535304","host":"s3://npm-registry-packages"}},"0.2.2":{"name":"@boldpenguin/stencil-redux","version":"0.2.2","author":{"name":"Ionic Team"},"license":"MIT","_id":"@boldpenguin/stencil-redux@0.2.2","maintainers":[{"name":"szechyjs","email":"jared.szechy@gmail.com"}],"homepage":"https://github.com/BoldPenguin/stencil-redux","bugs":{"url":"https://github.com/BoldPenguin/stencil-redux"},"dist":{"shasum":"0e1648088acf94b5e350ab8216c5c448619112e8","tarball":"https://registry.npmjs.org/@boldpenguin/stencil-redux/-/stencil-redux-0.2.2.tgz","fileCount":61,"integrity":"sha512-Qx2RxslPRsaHheKUe0E5/wUEXz5F0xCis1kU6V275Nb4qlB7vEMwRsK8tRvRriyt9rTpF+pvCnsiMVm4A7ZbyQ==","signatures":[{"sig":"MEUCIQDt1nkZGQQljxm8WMqFVOVMXaHv4emzebeZxjKCowfYVwIgLJWEzWXurSIqi5JuAs6HJukGYfadwmkbYd2y4y2Ices=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfR+SrCRA9TVsSAnZWagAAi/kP/0mk09a1QgsUO6c+Nev6\n8rUNcLafnoSHdIuDPOGoPjCmnMaQ4mxEVNHdGwfEq34oRcvCkFAlZdzQJ/oU\ns6vDvUT4Fsmgj8kJArgnMlj6SSs7xzWplHOZCLi/56hgRIxx8RgnfpdqRGUh\n3a5G0kiAVMWjMoGi0h3OT6EdZ1b9OCdJIIG6XyeA4Pwjl+u0if7B2/rzpdU1\ncmUJTC7NM6UC3XTuvueJMhUX5WrG26u1akubgkd7DulPiVim8OqaXubU6QBW\nY8Wp0VnumWjXkI/4hd5DdRPv7VRiSznJzVJKffOvQbLy9MI6gqnqI17DPEzC\nJycrR0y1OYHxUsY85wyRo/NLEcIvol7SVQp4rOUmFbmHLIGaaNHB8DWEOVFu\niBOn5jSxY/NB9TQnAmgi+uEml8o6R6m2QDVyWmDLTAm9ZQLJSwNmy2NfYqKF\njjAJSatt/ZSSyTGqar9fVCS4+I4FjpJWb1UOVa6d77zG63DroG4+JpVxGrse\njKtVqF3G7ygBW+QC+7Iv+qvsXOOQKQucETln3e62VuYWL+i7BtGa+df3FFfD\nwBvDYbUCCTL8IZyyTnCapqLiBkQShnS65VGPP+oLYHe7u+cC0agEthKjuhdN\nKxKd1dwojaKdKE+SzAa1kWoaTsdJl2anTl5vEcIFHW+zzxXxvcXd0Zr5WuuP\nv3h+\r\n=+xVW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","husky":{"hooks":{"pre-commit":"npm run lint"}},"types":"dist/types/index.d.ts","module":"dist/esm/es5/index.js","gitHead":"654b21bb663c828d547605368b4af19f0b1436c3","scripts":{"dev":"stencil build --es5 --dev --watch --serve --no-open --debug","lint":"tslint --config tslint.json --project tsconfig.json","test":"jest","build":"stencil build","start":"npm run dev","deploy":"np"},"_npmUser":{"name":"szechyjs","email":"jared.szechy@gmail.com"},"collection":"dist/collection/collection-manifest.json","repository":{"url":"git+https://github.com/BoldPenguin/stencil-redux.git","type":"git"},"_npmVersion":"6.14.5","description":"Stencil Redux - A simple redux-connector for Stencil-built web components","directories":{},"_nodeVersion":"12.18.3","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"np":"^5.0.0","jest":"^25.0.0","husky":"^4.2.1","redux":"^4.0.1","tslint":"^5.12.1","ts-jest":"^25.1.0","@types/jest":"^25.0.0","@stencil/core":"^0.18.0","semantic-release":"^17.0.8","tslint-ionic-rules":"0.0.21","@semantic-release/git":"^9.0.0","@semantic-release/exec":"^5.0.0","@semantic-release/changelog":"^5.0.1","conventional-changelog-conventionalcommits":"^4.3.0"},"peerDependencies":{"redux":"^4.0.4"},"_npmOperationalInternal":{"tmp":"tmp/stencil-redux_0.2.2_1598547115084_0.6371129555064101","host":"s3://npm-registry-packages"}}},"time":{"created":"2020-06-01T17:09:03.806Z","modified":"2026-01-21T17:59:01.511Z","0.2.1":"2020-06-01T17:09:04.181Z","0.2.2":"2020-08-27T16:51:55.217Z"},"bugs":{"url":"https://github.com/BoldPenguin/stencil-redux"},"author":{"name":"Ionic Team"},"license":"MIT","homepage":"https://github.com/BoldPenguin/stencil-redux","repository":{"url":"git+https://github.com/BoldPenguin/stencil-redux.git","type":"git"},"description":"Stencil Redux - A simple redux-connector for Stencil-built web components","maintainers":[{"email":"jared.szechy@gmail.com","name":"szechyjs"},{"email":"seanlaw27@gmail.com","name":"sean.lawrenz"}],"readme":"# Notice: This package is deprecated. The new version of [@stencil/redux](https://github.com/ionic-team/stencil-redux) no longer requires this fix.\n\n## 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"}