{"id":19898923,"url":"https://github.com/fakundo/react-redux-getters","last_synced_at":"2025-07-02T12:32:42.992Z","repository":{"id":26724598,"uuid":"109625734","full_name":"fakundo/react-redux-getters","owner":"fakundo","description":"Provides an extra layer of 'getters' between your React components and the Redux store","archived":false,"fork":false,"pushed_at":"2023-01-07T04:02:25.000Z","size":2500,"stargazers_count":5,"open_issues_count":16,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-16T23:04:15.714Z","etag":null,"topics":["getters","react","redux"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fakundo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-11-05T23:33:44.000Z","updated_at":"2021-07-21T13:36:28.000Z","dependencies_parsed_at":"2023-01-14T05:15:18.648Z","dependency_job_id":null,"html_url":"https://github.com/fakundo/react-redux-getters","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/fakundo/react-redux-getters","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fakundo%2Freact-redux-getters","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fakundo%2Freact-redux-getters/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fakundo%2Freact-redux-getters/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fakundo%2Freact-redux-getters/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fakundo","download_url":"https://codeload.github.com/fakundo/react-redux-getters/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fakundo%2Freact-redux-getters/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260901342,"owners_count":23079749,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["getters","react","redux"],"created_at":"2024-11-12T20:06:08.381Z","updated_at":"2025-06-20T07:34:53.475Z","avatar_url":"https://github.com/fakundo.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-redux-getters\n\n[![npm](https://img.shields.io/npm/v/react-redux-getters.svg)](https://www.npmjs.com/package/react-redux-getters)\n\nProvides an extra layer of 'getters' between your React components and the Redux store.\nThe getter returns the data from the store, if it's there, otherwise it returns a stub and invokes the fetch action.\nSo the store is filled automatically.\n\n### Installation\n```\nyarn add react-redux-getters\n```\n\n### Usage\n\n#### Create getter\n\n```js\nimport { createGetter } from 'react-redux-getters'\nimport { updateSubjects, fetchSubjects } from 'actions/subjects'\n\nexport const getSubjects = createGetter({\n  stateSelector: (state) =\u003e state.subjects,\n  asyncFetcher: () =\u003e fetchSubjects(),\n  stateUpdater: (data, dispatch) =\u003e dispatch(updateSubjects(data)),\n})\n```\n\n#### Configure store\n\n``` js\nimport { createStore, applyMiddleware } from 'redux'\nimport { gettersMiddleware } from 'react-redux-getters'\n\nconst store = createStore(\n  reducers,\n  applyMiddleware(gettersMiddleware, ...),\n)\n```\n\n#### Component\n\n```js\nimport React, { Component } from 'react'\nimport PropTypes from 'prop-types'\nimport { connectGetters } from 'react-redux-getters'\nimport { getSubjects } from 'selectors/subjects'\n\nclass Subjects extends Component {\n  static propTypes = {\n    subjectsGetter: PropTypes.object.isRequired\n  }\n\n  render() {\n    const { subjectsGetter } = this.props\n    const { isSucceded, isPending, isFailure, error, data } = subjectsGetter\n    \n    if (isPending) {\n      return (\n        \u003cLoadingRenderer /\u003e\n      )\n    }\n\n    if (isFailure) {\n      return (\n        \u003cErrorRenderer error={error} /\u003e\n      )\n    }\n\n    return (\n      \u003cDataRenderer data={data} /\u003e\n    )\n  }\n}\n\nconst mapGettersToProps = (state) =\u003e ({\n  subjectsGetter: getSubjects(state),\n})\n\nexport default connectGetters(mapGettersToProps)(Subjects)\n```\n\n#### Done! \n\nYour React component will be rerendered when the getter fetches the data and stores it in the Redux store.\n\n### Usage with [reselect](https://github.com/reduxjs/reselect)\n\n#### Create selector with getter\n\n```js\nimport { createSelector } from 'reselect'\nimport { createGetter, composeGetters } from 'react-redux-getters'\nimport { getSubjects } from 'selectors/subjects'\nimport { getTeachers } from 'selectors/teachers'\n\nexport const getHumanitarianSubjects = createSelector(\n  getSubjects,\n  (subjectsGetter) =\u003e composeGetters(\n    subjectsGetter,\n    (subjects) =\u003e filterHumanitarianSubjects(subjects)\n  )\n)\n```\n\n#### Component (usage is the same as with a regular getter)\n\n```js\nimport React, { Component } from 'react'\nimport PropTypes from 'prop-types'\nimport { connectGetters } from 'react-redux-getters'\nimport { getHumanitarianSubjects } from 'selectors/subjects'\n\nclass HumanitarianSubjects extends Component {\n  static propTypes = {\n    humanitarianSubjectsGetter: PropTypes.object.isRequired\n  }\n\n  render() {\n    const { humanitarianSubjectsGetter } = this.props\n    const { isSucceded, isPending, isFailure, error, data } = humanitarianSubjectsGetter\n    ...\n  }\n}\n\nconst mapGettersToProps = (state) =\u003e ({\n  humanitarianSubjectsGetter: getHumanitarianSubjects(state),\n})\n\nexport default connectGetters(mapGettersToProps)(HumanitarianSubjects)\n```\n\n### More examples\n\n#### Composing getters\n\n```js\nimport { createSelector } from 'reselect'\nimport { createGetter, composeGetters } from 'react-redux-getters'\nimport { getSubjects } from 'selectors/subjects'\nimport { getTeachers } from 'selectors/teachers'\n\nexport const getSubjectsAndTeachers = createSelector(\n  getSubjects,\n  getTeachers,\n  (subjectsGetter, teachersGetter) =\u003e composeGetters(\n    subjectsGetter,\n    teachersGetter,\n    (subjects, teachers) =\u003e ({ subjects, teachers })\n  )\n)\n```\n\n#### Using props\n\n```js\n// Getter\nimport { createGetter } from 'react-redux-getters'\nimport { fetchTeacher, updateTeacher } from 'actions/teachers'\n\nexport const getTeacher = createGetter({\n  stateSelector: (state, props) =\u003e state.teachers[props.teacherId],\n  asyncFetcher: (dispatch, state, props) =\u003e fetchTeacher(props.teacherId),\n  stateUpdater: (data, dispatch, state, props) =\u003e dispatch(updateTeacher(props.teacherId, data))\n})\n\n// Component\nimport React, { Component } from 'react'\nimport PropTypes from 'prop-types'\nimport { connectGetters } from 'react-redux-getters'\nimport { getTeacher } from 'selectors/teachers'\n\nclass Teacher extends Component {\n  ...\n}\n\nconst mapGettersToProps = (state, props) =\u003e ({\n  teacherGetter: getTeacher(state, { teacherId: props.teacherId }),\n})\n\nexport default connectGetters(mapGettersToProps)(Teacher)\n\n// Using component\n\u003cTeacher teacherId={1} /\u003e\n```\n\n#### Composing getters without reselect\n\n```js\nimport { composeGetters } from 'react-redux-getters'\nimport { getSubjects } from 'actions/subjects'\n\nexport const getSubject = (state, props) =\u003e composeGetters(\n  getSubjects(state),\n  (subjects) =\u003e findSubjectById(subjects, props.subjectId)\n)\n```\n\n### API\n\n```js\nimport { createGetter, composeGetters } from 'react-redux-getters'\n\ncreateGetter({\n  stateSelector: (state, props) =\u003e dataFromState, // Required func – should return data from store state\n  asyncFetcher: async (dispatch, state, props) =\u003e fetchedData, // Required async func – should return fetched data (Promise)\n  stateUpdater: (data, dispatch, state, props) =\u003e {}, // Required func - should dispatch store update\n  shouldFetch: (dataFromState, state, props) =\u003e isNil(dataFromState) // Optional func – condition that fetching is needed\n})\n\ncomposeGetters(\n  ...getters, \n  composeData: (...gettersData) =\u003e newComposedData // Func – creates composed data from incoming getters data\n)\n```\n\n### License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffakundo%2Freact-redux-getters","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffakundo%2Freact-redux-getters","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffakundo%2Freact-redux-getters/lists"}