{"_id":"reprovider","_rev":"33-81bed74955e6ea8bde10eda780bf244c","time":{"created":"2023-07-17T02:51:06.686Z","1.0.0":"2023-07-15T05:59:46.417Z","modified":"2023-07-23T08:56:27.316Z","1.0.1":"2023-07-15T06:57:34.411Z","1.0.2":"2023-07-15T06:59:47.552Z","1.0.3":"2023-07-15T07:00:50.561Z","1.0.4":"2023-07-15T07:04:22.397Z","1.0.5":"2023-07-15T07:11:17.382Z","1.0.6":"2023-07-15T07:12:44.239Z","1.0.7":"2023-07-15T07:18:15.999Z","1.0.8":"2023-07-15T07:20:04.218Z","1.0.9":"2023-07-15T07:21:53.072Z","1.0.10":"2023-07-15T07:25:24.751Z","1.0.11":"2023-07-15T07:50:03.888Z","1.0.12":"2023-07-15T08:33:18.831Z","1.0.0-first":"2023-07-17T02:51:06.879Z","1.0.1-first":"2023-07-17T04:12:23.110Z","1.0.2-first":"2023-07-17T07:57:14.109Z","1.0.3-first":"2023-07-18T01:50:16.828Z","1.0.4-stable":"2023-07-22T06:10:45.792Z","1.0.5-stable":"2023-07-22T06:13:05.564Z","1.0.6-stable":"2023-07-22T06:41:29.482Z","1.1.0-stable":"2023-07-23T08:56:27.141Z"},"name":"reprovider","dist-tags":{"latest":"1.1.0-stable"},"versions":{"1.0.0-first":{"name":"reprovider","description":"A minimalist package created created for manage services using depedency injection easly and quickly.","version":"1.0.0-first","type":"module","main":"dist/index.js","types":"dist/index.d.ts","keywords":["TypeScript","Provider","Service manager","Consumer","react"],"author":{"name":"Ezequiel López"},"license":"GPL-3.0","scripts":{"build":"tsc"},"devDependencies":{"@types/react":"^18.2.15","@types/react-dom":"^18.2.7","typescript":"^5.1.6"},"dependencies":{"@reduxjs/toolkit":"^1.9.5","react":"^18.2.0","react-dom":"^18.2.0","react-redux":"^8.1.1"},"gitHead":"0ff985329dc45e6e924e0a11f69e368f50baafce","_id":"reprovider@1.0.0-first","_nodeVersion":"18.13.0","_npmVersion":"9.6.0","dist":{"integrity":"sha512-8d9OJjxp0Ktzhh6AquQOs7ot/EK3lh8gzsA7xeolHKbiWsX/aex4hG9f4OHxQV+kbIeqAyQLE7DQ3K3DkygBxw==","shasum":"33eee68a41c1e5de831a13bc11abc3f7b637ff65","tarball":"https://registry.npmjs.org/reprovider/-/reprovider-1.0.0-first.tgz","fileCount":151,"unpackedSize":225776,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDaySprWqFZJEaQpICU172Gh/TEjBXYLFZ2R3eFdm1ruwIhAOVKhj37By/9dB12H2WqvddRajLet0tYbk7E39EkGi+U"}]},"_npmUser":{"name":"hellseher","email":"contacto@ezequiellopez.ar"},"directories":{},"maintainers":[{"name":"hellseher","email":"contacto@ezequiellopez.ar"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/reprovider_1.0.0-first_1689562266686_0.39779049147773504"},"_hasShrinkwrap":false},"1.0.1-first":{"name":"reprovider","description":"A minimalist package created created for manage services using depedency injection easly and quickly.","version":"1.0.1-first","type":"module","main":"dist/index.js","types":"dist/index.d.ts","keywords":["TypeScript","Provider","Service manager","Consumer","react"],"author":{"name":"Ezequiel López"},"license":"GPL-3.0","scripts":{"build":"tsc"},"devDependencies":{"@types/react":"^18.2.15","@types/react-dom":"^18.2.7","typescript":"^5.1.6"},"dependencies":{"@reduxjs/toolkit":"^1.9.5","react":"^18.2.0","react-dom":"^18.2.0","react-redux":"^8.1.1"},"gitHead":"4da89ed334759dbbb6a98fcea67dabfea0330d35","_id":"reprovider@1.0.1-first","_nodeVersion":"18.13.0","_npmVersion":"9.6.0","dist":{"integrity":"sha512-Hc0sG8WIBdpMVVKGhJYYVzk4qKrI+z1U1eKJaM0S7iBLyF5rGt3UqrS1xAEfVEixDehMU8goDhRpdzO+JI+73w==","shasum":"9d3418599aa06f91c79cacbfa1074a381c146b64","tarball":"https://registry.npmjs.org/reprovider/-/reprovider-1.0.1-first.tgz","fileCount":151,"unpackedSize":229768,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCohbbnltTtxjQgI5rp1ACkMTrIsRGf7JxGfI6HSa+twgIgfkIvm0Kst9m4xban8IVB0TKqRN9+SDr7ho+462uKWNA="}]},"_npmUser":{"name":"hellseher","email":"contacto@ezequiellopez.ar"},"directories":{},"maintainers":[{"name":"hellseher","email":"contacto@ezequiellopez.ar"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/reprovider_1.0.1-first_1689567142924_0.5611672691502769"},"_hasShrinkwrap":false},"1.0.2-first":{"name":"reprovider","description":"A minimalist package created created for manage services using depedency injection easly and quickly.","version":"1.0.2-first","type":"module","main":"dist/index.js","types":"dist/index.d.ts","keywords":["TypeScript","Provider","Service manager","Consumer","react"],"author":{"name":"Ezequiel López"},"license":"GPL-3.0","scripts":{"build":"tsc"},"devDependencies":{"@types/react":"^18.2.15","@types/react-dom":"^18.2.7","typescript":"^5.1.6"},"dependencies":{"@reduxjs/toolkit":"^1.9.5","react":"^18.2.0","react-dom":"^18.2.0","react-redux":"^8.1.1"},"gitHead":"50ad8a7ce4bb613cdfd5332f6711b0484d274e64","_id":"reprovider@1.0.2-first","_nodeVersion":"18.13.0","_npmVersion":"9.6.0","dist":{"integrity":"sha512-wSTssRjlyd2//pkJb0RFA+NBFfAMXGEqc5uV7X8KRK69jhPTMArgnh6Ga9OyLFPmfIA4slpGk/yVSOarMD6q3w==","shasum":"1bab0cdec6e36994d9da70ff07dcaa4dfd0c2d3c","tarball":"https://registry.npmjs.org/reprovider/-/reprovider-1.0.2-first.tgz","fileCount":151,"unpackedSize":229769,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC7vhFSp3Y1F+C2XFMPYVQQydCM2TRp7nsCQm7OQ//IcAIgJ7HEdV+2UFIkdFoybPR+2L5UQyH9jHrnuB2Ahoaz73Y="}]},"_npmUser":{"name":"hellseher","email":"contacto@ezequiellopez.ar"},"directories":{},"maintainers":[{"name":"hellseher","email":"contacto@ezequiellopez.ar"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/reprovider_1.0.2-first_1689580633881_0.19286865352618077"},"_hasShrinkwrap":false},"1.0.3-first":{"name":"reprovider","description":"A minimalist package created created for manage services using depedency injection easly and quickly.","version":"1.0.3-first","type":"module","main":"dist/index.js","types":"dist/index.d.ts","keywords":["TypeScript","Provider","Service manager","Consumer","react"],"author":{"name":"Ezequiel López"},"license":"GPL-3.0","scripts":{"build":"tsc"},"devDependencies":{"@types/react":"^18.2.15","@types/react-dom":"^18.2.7","typescript":"^5.1.6"},"dependencies":{"@reduxjs/toolkit":"^1.9.5","react":"^18.2.0","react-dom":"^18.2.0","react-redux":"^8.1.1"},"gitHead":"5e93c626dd5320e273d01b078ba21f0b39f4c01c","_id":"reprovider@1.0.3-first","_nodeVersion":"18.13.0","_npmVersion":"9.6.0","dist":{"integrity":"sha512-7j15YrDqYP3hoeywbRIwUAqmHWocDGUmsxEq+zCeY5YCGX7YhAZCXbfD6TJxXZN1D+QEDyfD9tuk2daXY8vmxg==","shasum":"fbdde8ac76a66b8ee6dab2da52d726c18edb447c","tarball":"https://registry.npmjs.org/reprovider/-/reprovider-1.0.3-first.tgz","fileCount":49,"unpackedSize":190786,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEz3nlAtX+LJ9DNww0X1gg+IgDjr5W562JR4GemUZ+b2AiBIfQtoV10ftE0sdLdeGJsbE+vRiydozkkVVqbc+gu1JA=="}]},"_npmUser":{"name":"hellseher","email":"contacto@ezequiellopez.ar"},"directories":{},"maintainers":[{"name":"hellseher","email":"contacto@ezequiellopez.ar"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/reprovider_1.0.3-first_1689645016574_0.13563677816335584"},"_hasShrinkwrap":false},"1.0.4-stable":{"name":"reprovider","description":"A minimalist package created created for manage services using depedency injection easly and quickly.","version":"1.0.4-stable","type":"module","main":"dist/index.js","types":"dist/index.d.ts","keywords":["TypeScript","Provider","Service manager","Consumer","react"],"author":{"name":"Ezequiel López"},"license":"GPL-3.0","scripts":{"build":"tsc"},"devDependencies":{"@types/react":"^18.2.15","@types/react-dom":"^18.2.7","typescript":"^5.1.6"},"dependencies":{"@reduxjs/toolkit":"^1.9.5","react":"^18.2.0","react-dom":"^18.2.0","react-redux":"^8.1.1"},"gitHead":"5e93c626dd5320e273d01b078ba21f0b39f4c01c","_id":"reprovider@1.0.4-stable","_nodeVersion":"18.13.0","_npmVersion":"9.6.0","dist":{"integrity":"sha512-KWpw+WYn3itSIJBjBpoGQfiWDA0iey2X6J3np5V7ZLlZQgMjZ3Ox7iql34DUlf3cUWBhb/7ne4Np8aiYUVlD/A==","shasum":"c2fd95dd960608f8cfbc73b756a1f236b5bedd0c","tarball":"https://registry.npmjs.org/reprovider/-/reprovider-1.0.4-stable.tgz","fileCount":49,"unpackedSize":190787,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB8gAsw7RcGgKF7ef2AU15X/WILryruR2WBoUGNp4NqHAiEA8vHhXx2KSqA62qtHe7BjJ9nhS4fi6fGFg/kt6Kx8A/Q="}]},"_npmUser":{"name":"hellseher","email":"contacto@ezequiellopez.ar"},"directories":{},"maintainers":[{"name":"hellseher","email":"contacto@ezequiellopez.ar"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/reprovider_1.0.4-stable_1690006245537_0.9854849379321557"},"_hasShrinkwrap":false},"1.0.5-stable":{"name":"reprovider","description":"A minimalist package created created for manage services using depedency injection easly and quickly.","version":"1.0.5-stable","type":"module","main":"dist/index.js","types":"dist/index.d.ts","keywords":["TypeScript","Provider","Service manager","Consumer","react"],"author":{"name":"Ezequiel López"},"license":"GPL-3.0","scripts":{"build":"tsc"},"devDependencies":{"@types/react":"^18.2.15","@types/react-dom":"^18.2.7","typescript":"^5.1.6"},"dependencies":{"@reduxjs/toolkit":"^1.9.5","react":"^18.2.0","react-dom":"^18.2.0","react-redux":"^8.1.1"},"gitHead":"5e93c626dd5320e273d01b078ba21f0b39f4c01c","_id":"reprovider@1.0.5-stable","_nodeVersion":"18.13.0","_npmVersion":"9.6.0","dist":{"integrity":"sha512-v2G9BvEN5Hz31jt0j+kFFE6+1FbcLSWICqbKnKPALofx4AULqKj+UX00oRhcBiKI/zC+a4jXrqyBKlCdLYaegw==","shasum":"614aea46908045b5eb9d14c9a420c2294551201d","tarball":"https://registry.npmjs.org/reprovider/-/reprovider-1.0.5-stable.tgz","fileCount":49,"unpackedSize":190806,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGRP7D/FvffZbVkVBQSCf8MJYPFa3h3fLPQor1SH0ZfNAiEAySfEA38P1Zuduu5UDnU5/oBVMoB4NQE+vTmaltDdtuU="}]},"_npmUser":{"name":"hellseher","email":"contacto@ezequiellopez.ar"},"directories":{},"maintainers":[{"name":"hellseher","email":"contacto@ezequiellopez.ar"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/reprovider_1.0.5-stable_1690006385324_0.0730535134614485"},"_hasShrinkwrap":false},"1.0.6-stable":{"name":"reprovider","description":"A minimalist package created created for manage services using depedency injection easly and quickly.","version":"1.0.6-stable","type":"module","main":"dist/index.js","types":"dist/index.d.ts","keywords":["TypeScript","Provider","Service manager","Consumer","react"],"author":{"name":"Ezequiel López"},"license":"GPL-3.0","scripts":{"build":"tsc"},"devDependencies":{"@types/react":"^18.2.15","@types/react-dom":"^18.2.7","typescript":"^5.1.6"},"dependencies":{"@reduxjs/toolkit":"^1.9.5","react":"^18.2.0","react-dom":"^18.2.0","react-redux":"^8.1.1"},"gitHead":"5e93c626dd5320e273d01b078ba21f0b39f4c01c","_id":"reprovider@1.0.6-stable","_nodeVersion":"18.13.0","_npmVersion":"9.6.0","dist":{"integrity":"sha512-IaJi1AR72rSZXqPxwj4EnT6OyDgEMKdQvVuuoumPEwqvY7myyW0KnD1qcSCZ1fidJomV20ZwweVDZvxHJ8xGvA==","shasum":"8c608e47ca70c4b7255fcf4bc7817983965bd854","tarball":"https://registry.npmjs.org/reprovider/-/reprovider-1.0.6-stable.tgz","fileCount":49,"unpackedSize":190805,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCG46GOUg30Jk3+f9ux50qOUBCxULAmOwPUwmH9xMkUQQIgU61ngT2fmru62IHnWgNjWPSdS6sIhr927aj5xChJurQ="}]},"_npmUser":{"name":"hellseher","email":"contacto@ezequiellopez.ar"},"directories":{},"maintainers":[{"name":"hellseher","email":"contacto@ezequiellopez.ar"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/reprovider_1.0.6-stable_1690008089317_0.9275167737989898"},"_hasShrinkwrap":false},"1.1.0-stable":{"name":"reprovider","description":"A minimalist package created created for manage services using depedency injection easly and quickly.","version":"1.1.0-stable","type":"module","main":"dist/index.js","types":"dist/index.d.ts","keywords":["TypeScript","Provider","Service manager","Consumer","react"],"author":{"name":"Ezequiel López"},"license":"GPL-3.0","scripts":{"build":"tsc"},"devDependencies":{"@types/react":"^18.2.15","@types/react-dom":"^18.2.7","typescript":"^5.1.6"},"dependencies":{"@reduxjs/toolkit":"^1.9.5","react":"^18.2.0","react-dom":"^18.2.0","react-redux":"^8.1.1"},"gitHead":"91a9e18612e12d8ec0fbe1bc9372ef8ec352c21a","_id":"reprovider@1.1.0-stable","_nodeVersion":"18.13.0","_npmVersion":"9.6.0","dist":{"integrity":"sha512-r10ANSWWBhzo6FYS6Q0HOG/ClJpg1gl+g6rrkN6y99VzSt6a1Bw5OtVEOIzidW9W8HxR7C3yiEjD7MX1ClgPpg==","shasum":"4678c813495eceed20abd7b634abc48fa8fb61e8","tarball":"https://registry.npmjs.org/reprovider/-/reprovider-1.1.0-stable.tgz","fileCount":51,"unpackedSize":190918,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE6zieRGksc/apxLmMkQuWhJCcIJxDiP0dqMr6XsehnXAiAIz8vpTvcnWcq3sSYr6c6wfUikORqb+tJUJBQDEb7dzg=="}]},"_npmUser":{"name":"hellseher","email":"contacto@ezequiellopez.ar"},"directories":{},"maintainers":[{"name":"hellseher","email":"contacto@ezequiellopez.ar"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/reprovider_1.1.0-stable_1690102586934_0.4524670426490922"},"_hasShrinkwrap":false}},"maintainers":[{"name":"hellseher","email":"contacto@ezequiellopez.ar"}],"description":"A minimalist package created created for manage services using depedency injection easly and quickly.","keywords":["TypeScript","Provider","Service manager","Consumer","react"],"author":{"name":"Ezequiel López"},"license":"GPL-3.0","readme":"![Texto alternativo](./logo.png)\n\n# Reprovider\n\nA minimalist package created created for manage services using depedency injection easly and quickly.\n\n## Overview\n\nWhen our react app is scaling sometimes is necessary that we organize the logic for get a better understanding of our code.\n\nReprovider is designed for developers that want get a quickly and organized service provider in a react application using techniques like the Dependency Injection very simple.\n\nWith reprovider we can create services and consume into a component or outside of it.\n\nReprovider supports Redux for inject services into reducers and thunks. If you want use reprovider with redux, Read this [section](#buildux)\n\n## Full docs\n\nRead the latest full docs [here](https://lopez15-hub.github.io/reprovider-docs/)\n\n## How it works\n\n![Texto alternativo](./how-it-works.png)\n\n# Quick start\n\n### Install\n\nwith npm:\n\n```powershell\n    npm i reprovider\n```\n\n### Using Reprovider\n\nFirst create the repository, it can contains the interacions with an A.P.I or Database.\n\n_greets.repository.ts_\n\n```typescript\nexport class GreetsRepository {\n  hello = () => \"Hello \";\n  goodBay = () => \"Goodbay \";\n}\n```\n\nNow create the service and inject the repository into constructor.\n\n_greets.service.ts_\n\n```typescript\nimport { GreetsRepository } from \"../repository/greets.repository\";\n\nexport class GreetsService {\n  constructor(private readonly repository: GreetsRepository) {}\n  sayHello = (): string => `${this.repository.hello()} World From Reprovider`;\n  sayGoodbye = (): string =>\n    `${this.repository.goodBay()} World From Reprovider`;\n}\n```\n\nIts time to create the registry file.\n\nIt contains all services with its dependencies that will register into ServiceProvider\n\n_registry.ts_\n\n```typescript\nimport { Service } from \"reprovider\";\nimport { GreetsService } from \"./services/greets.service\";\nimport { GreetsRepository } from \"./repository/greets.repository\";\n\nexport const services: Service[] = [\n  {\n    description: \"Service for greeting people\",\n    service: GreetsService,\n    dependencies: [GreetsRepository],\n  },\n];\n```\n\nOnce do you configure the services and declared into registry file. FInally we can inject the services into the app.\n\nFor that, add the ServiceProvider at the top of the app.\n\nThe service provided will be responsible of create the context that we will using later calling the useProvider hook.\n\n_app.tsx_\n\n```typescript\nimport { ServiceProvider } from \"reprovider\";\nimport SayHello from \"./components/say-hello.component\";\nimport { services } from \"./core/registry\";\n\nconst App = (): JSX.Element => {\n  return (\n    <ServiceProvider services={services}>\n      <SayHello />\n    </ServiceProvider>\n  );\n};\n\nexport default App;\n```\n\n### Say hello with useProvider\n\nFinally, just import the useProvider, pass the reference of Service that you wan use and desestructure the provider.\n\nOptional: You can rename the provider as you want. This is recommended for understand the code, better.\n\n_say-hello.component.tsx_\n\n```typescript\nimport { useProvider } from \"reprovider\";\nimport { GreetsService } from \"../core/services/greets.service\";\n\n/**\n * Show a simple hello world\n *\n */\nconst SayHello = () => {\n  /**\n   * Optional: Also we can rename the provider or use the standard reference.\n   * Is recommended rename the provider for understand the code better\n   */\n  const { provider: greetsService } = useProvider(GreetsService);\n\n  return (\n    <div>\n      <h1>{greetsService.sayHello()}</h1>\n    </div>\n  );\n};\n\nexport default SayHello;\n```\n\n## Buildux\n\nWhat is buildux?\n\nBuildux is a slice builder that allows inject services into reducers and thunks creating a context and consume services from reducers easy. It works with redux-toolkit library.\n\n### How Buildux Works\n\nYou can review the next graph for understand the buildux flow\n\n![Texto alternativo](./with-buildux.png)\n\n### Usage\n\nInstall the dependencies\n\n```powershell\nnpm install reprovider @reduxjs/toolkit react-redux\n```\n\nFirst create the state interface\n\ncounter-state.interface.ts\n\n```typescript\nexport interface CounterState {\n  value: number;\n}\n```\n\nNow, create the buildux file, import the state, and pass the state type to the instance. This will return a context that you will use later in reducers.\n\ncounter.buildux.ts\n\n```typescript\nimport { Buildux } from \"reprovider\";\nimport { CounterState } from \"../../interfaces/counter-state.interface\";\n\nconst { context } = new Buildux<CounterState>({\n  name: \"counter\",\n  initialState: { value: 0 },\n});\n```\n\nAfter created the Buildux instance, we need create the reducers. For that, use the createReducers method:\n\ncounter.buildux.ts\n\n```typescript\nconst { context } = new Buildux<CounterState>({\n  name: \"counter\",\n  initialState: { value: 0 },\n}).createReducers({\n  reducers: {\n    increment: (state) => {\n      state.value += 1;\n    },\n    decrement: (state) => {\n      state.value -= 1;\n    },\n  },\n});\n```\n\nthen exports the actions created from reducers and the reducer from context:\n\ncounter.buildux.ts\n\n```typescript\nexport const { increment, decrement } = context.actions;\nexport const counterReducer = context.reducer;\n```\n\nNow create the store and import the exported reducer from counter.buildux.ts\n\nstore.ts\n\n```typescript\nimport { configureStore } from \"@reduxjs/toolkit\";\nimport { counterReducer } from \"./counter-store/counter.buildux\";\n\nexport const store = configureStore({\n  reducer: {\n    counter: counterReducer,\n  },\n});\n\nexport type RootState = ReturnType<typeof store.getState>;\nexport type AppDispatch = typeof store.dispatch;\n```\n\nIn your index.tsx, import the store and the Provider Component and pass the store to tag.\n\n```typescript\nimport React from \"react\";\nimport ReactDOM from \"react-dom/client\";\nimport App from \"./App\";\nimport \"./index.css\";\n\nimport { store } from \"./core/store/store\";\nimport { Provider } from \"react-redux\";\n\nReactDOM.createRoot(document.getElementById(\"root\")!).render(\n  <React.StrictMode>\n    <Provider store={store}>\n      <App />\n    </Provider>\n  </React.StrictMode>\n);\n```\n\nFor consume the reducers and dispatch actions we need create these hooks:\n\nhooks.ts\n\n```typescript\nimport { useDispatch, useSelector } from \"react-redux\";\nimport type { TypedUseSelectorHook } from \"react-redux\";\nimport { AppDispatch, RootState } from \"../store/store\";\n\n//Hooks for read and emit states with redux.\n\n//Calls an action\nexport const useAppDispatch: () => AppDispatch = useDispatch;\n\n//Read the state\nexport const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;\n```\n\nNow, we are ready to use the states and actions. For that, import the hooks in the component and use the hooks as follows:\n\napp.tsx\n\n```typescript\nconst count = useAppSelector((state) => state.counter.value);\nconst dispatch = useAppDispatch();\n```\n\napp.tsx\n\n```typescript\nimport reproviderLogo from \"./assets/reprovider_logo.png\";\nimport \"./App.css\";\nimport { useAppSelector, useAppDispatch } from \"./core/hooks/hooks\";\nimport {\n  decrement,\n  increment,\n} from \"./core/store/counter-store/counter.buildux\";\n\nfunction App() {\n  const count = useAppSelector((state) => state.counter.value);\n  const dispatch = useAppDispatch();\n  return (\n    <>\n      <div>\n        <img src={reproviderLogo} className=\"logo\" alt=\"Reprovider logo\" />\n        <a href=\"https://redux-toolkit.js.org/\">\n          <img\n            src=\"https://redux-toolkit.js.org/img/redux.svg\"\n            className=\"logo Redux Toolkit\"\n            alt=\"Redux toolkit logo\"\n          />\n        </a>\n      </div>\n      <h1>Reprovider + Redux Example</h1>\n      <div className=\"card\">\n        <button onClick={() => dispatch(increment(1))}>+1</button>\n        <h1>Counter value is: {count}</h1>\n        <button onClick={() => dispatch(decrement(1))}>-1</button>\n        <p>\n          Edit <code>src/App.tsx</code> and save to test HMR\n        </p>\n      </div>\n    </>\n  );\n}\n\nexport default App;\n```\n\nYou can read the complete example reading [here](https://github.com/Lopez15-Hub/reprovider/tree/master/examples/buildux-counter)\n\n### Buildux Thunk\n\nOverview\n\nBuildux provide a custom thunk for asincronus calls and it's an implementation of [createAsyncThunk](https://redux-toolkit.js.org/usage/usage-guide#async-requests-with-createasyncthunk).\n\nCreating a BuilduxThunk\n\n```typescript\nimport { builduxThunk } from \"reprovider\";\n\nbuilduxThunk<User[], ActionArgument>({\n  // You can infer the type of the 'action' parameter here if it has one.\n  description: \"Get user from API\",\n  reference: \"/users\",\n  action: async () => {\n    const usersService = context.consumer.get(UsersService);\n    const users = await usersService.getUsers();\n    return users;\n  },\n});\n```\n\nFor use the thunk we need register into thunkRegistry method that it's provided when we create the Buildux instance\n\nusers.buildux.ts\n\n```typescript\nconst { context, thunksRegistry, createReducers } = new Buildux<\n  UsersState,\n  UsersThunks\n>({\n  name: \"users\",\n  services,\n  initialState: {\n    users: [],\n  },\n});\n\ncreateReducers(usersReducers);\n\nthunksRegistry(context, (context) => ({\n  fetchUsers: builduxThunk<User[]>({\n    description: \"Get user from API\",\n    reference: \"/users\",\n    action: async () => {\n      const usersService = context.consumer.get(UsersService);\n      const users = await usersService.getUsers();\n      return users;\n    },\n  }),\n}));\n```\n\nalso we can declare our thunks out of our buildux file and the pass the reference into thunksRegistry.\n\nusers-thunks.registry.ts\n\n```typescript\nexport const userThunksRegistry = <T>(context: BuilduxContext<T>) => ({\n  fetchUsers: builduxThunk<User[]>({\n    description: \"Get user from API\",\n    reference: \"/users\",\n    action: async () => {\n      const usersService = context.consumer.get(UsersService);\n      const users = await usersService.getUsers();\n      return users;\n    },\n  }),\n});\n```\n\nthen we can import it into buildux file.\n\nusers.buildux.ts\n\n```typescript\nconst { context, thunksRegistry } = new Buildux<UsersState>({\n  name: \"users\",\n  services,\n  initialState: {\n    users: [],\n  },\n});\ncreateReducers(usersReducers);\n\n//Imported here\nthunksRegistry(context, userThunksRegistry);\n```\n\n### Buildux Examples\n\nYou can view the examples with buildux and thunks [here](https://github.com/Lopez15-Hub/reprovider/tree/master/examples)\n\n### Injecting Services and consuming into reducer\n\nIf you need consume services into a reducer you can follow the next steps:\n\nCreate the registry file for store the services for slice\n\nRecomendation:\n\nIt is recommended to create a registry for the slice and only insert the services that are part of it. This helps build a better code structure.\n\nCreate the registry file\n\nregistry.ts\n\n```typescript\nimport { Service } from \"reprovider\";\n\nexport const services: Service[] = [\n  {\n    description: \"Service for greeting people\",\n    service: UsersService,\n    dependencies: [UsersRepository],\n  },\n];\n```\n\nusers.buildux.ts\n\n```typescript\nimport { services } from \"./registry\";\n\nconst { context } = new Buildux<UsersState>({\n  name: \"users\",\n  services,\n  initialState: {\n    name: \"\",\n    lastName: \"\",\n    email: \"\",\n  },\n}).createReducers({\n  getUsers: (state) => {\n    const service = context.consumer.get(MyService);\n    // Do something with your service...\n  },\n});\n```\n\n### Consuming services into a thunk\n\n```typescript\nexport const userThunksRegistry = <T>(context: BuilduxContext<T>) => ({\n  fetchUsers: builduxThunk<User[]>({\n    description: \"Get user from API\",\n    reference: \"/users\",\n    action: async () => {\n      //Read the service from context.\n      const usersService = context.consumer.get(UsersService);\n      const users = await usersService.getUsers();\n      return users;\n    },\n  }),\n});\n```\n\n## Examples\n\nYou can view more examples follow this _[link](https://github.com/Lopez15-Hub/reprovider/tree/master/examples)_\n","readmeFilename":"readme.md"}