{"id":21712506,"url":"https://github.com/youfoundron/react-redux-collect","last_synced_at":"2025-04-12T18:08:20.316Z","repository":{"id":57343206,"uuid":"87653237","full_name":"youfoundron/react-redux-collect","owner":"youfoundron","description":"Helpful function for connecting redux state and actions to React components.","archived":false,"fork":false,"pushed_at":"2017-10-10T15:57:24.000Z","size":87,"stargazers_count":5,"open_issues_count":2,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-12T18:04:29.253Z","etag":null,"topics":["connect","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":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/youfoundron.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-04-08T17:58:17.000Z","updated_at":"2018-10-05T16:08:35.000Z","dependencies_parsed_at":"2022-09-16T07:51:25.975Z","dependency_job_id":null,"html_url":"https://github.com/youfoundron/react-redux-collect","commit_stats":null,"previous_names":["rongierlach/react-redux-collect"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/youfoundron%2Freact-redux-collect","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/youfoundron%2Freact-redux-collect/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/youfoundron%2Freact-redux-collect/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/youfoundron%2Freact-redux-collect/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/youfoundron","download_url":"https://codeload.github.com/youfoundron/react-redux-collect/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248610345,"owners_count":21132921,"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":["connect","react","redux"],"created_at":"2024-11-25T23:39:29.027Z","updated_at":"2025-04-12T18:08:20.295Z","avatar_url":"https://github.com/youfoundron.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Redux Collect\n[![Build Status](https://travis-ci.org/rongierlach/react-redux-collect.svg?branch=master)](https://travis-ci.org/rongierlach/react-redux-collect)  [![Coverage Status](https://coveralls.io/repos/github/rongierlach/react-redux-collect/badge.svg?branch=master)](https://coveralls.io/github/rongierlach/react-redux-collect?branch=master) [![Dependency Status](https://david-dm.org/rongierlach/react-redux-collect.svg)](https://david-dm.org/rongierlach/react-redux-collect) [![devDependency Status](https://david-dm.org/rongierlach/react-redux-collect/dev-status.svg)](https://david-dm.org/rongierlach/react-redux-collect#info=devDependencies) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)  \n\nThis is the consequence of some feedback and meditation on [react-redux-connect-helpers](https://github.com/rongierlach/react-redux-connect-helpers).  \nChiefly, the resulting nested mess of connectors after composition:\n\n![screen shot 2017-04-08 at 3 01 55 pm](https://cloud.githubusercontent.com/assets/4658359/24832048/0342a57a-1c6d-11e7-8462-aab689054e54.png)  \n*screenshot from [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en)*\n\nThis function implements the same core functionality as react-redux-connect-helper's `connectStateValue`, but by building up `mapStateToProps` and `mapDispatchToProps` arguments to be passed to a _single_ [`connect`](https://github.com/reactjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options) call.  \n\nCollect some values in state and connect them as props. :+1:\n\n## Installation\n`$ npm install react-redux-collect`\n\n## Usage\n```javascript\nimport collect from 'react-redux-collect'\n\nconst provideProps = collect([\u003cpath\u003e, \u003cname\u003e, \u003ctransformer\u003e], ...)\n```  \n\nThe arguments to connect a value in state are ordered as follows:\n* `path`: An array or string denoting the key(s) to access the value in state.\n* `name` (optional): The key of the resulting prop, defaults to the last key in `path`.\n* `transformer` (optional): Function to transform the accessed value or action.  \nFor values, will pass the value as the first param and state as the second.  \nFor actions, will pass the action as the first param and props as the second.\n\nFor example, where `state` and `actionCreators` look like this:\n```javascript\nconst state = {\n  id: 'SST-130',\n  title: 'You\\'re Living All Over Me',\n  artist: 'Dinosaur Jr.',\n  tracks: [\n    { title: 'Little Fury Things', length: '3:06' },\n    { title: 'Kracked', length: '2:50' },\n    { title: 'Sludgefeast', length: '5:17' },\n    { title: 'The Lung', length: '3:51' },\n    { title: 'Raisans', length: '3:50' },\n    { title: 'Tarpit', length: '4:36' },\n    { title: 'In a Jar', length: '3:28' },\n    { title: 'Lose', length: '3:11' },\n    { title: 'Poledo', length: '5:43' }\n  ]\n}\n\nconst actionCreators = {\n  openPlayer: () =\u003e ({\n    type: 'OPEN_PLAYER'\n  }),\n  playAlbum: albumId =\u003e ({\n    type: 'PLAY_ALBUM',\n    payload: albumId\n  })\n}\n```\nThis code:\n```javascript\nimport { createCollect } from 'react-redux-collect'\nimport actionCreators from './actionCreators'\n\nconst collect = createCollect(actionCreators)\n\nconst provideProps = collect(\n  'id',\n  ['title']\n  ['artist', 'band'],\n  [['tracks', 0], 'firstTrack'],\n  ['tracks', 'numTracks', tracks =\u003e tracks.length],\n  [['actions', 'openPlayer']],\n  [['actions', 'playAlbum'], 'onClick', (action, {id}) =\u003e action.bind(null, id)]\n)\n```\nIs equivalent to:\n```javascript\nimport { connect } from 'react-redux'\nimport actionCreators from './actionCreators'\n\nconst mapStateToProps = (state, ownProps) =\u003e ({\n  id: state.id,\n  title: state.title,\n  band: state.artist,\n  firstTrack: state.tracks[0],\n  numTracks: state.tracks.length\n})\n\nconst mapDispatchToProps = (dispatch, ownProps) =\u003e ({\n  openPlayer: (...args) =\u003e\n    dispatch(actionCreators.openPlayer(...args)),\n  onClick: (...args) =\u003e\n    dispatch(actionCreators.playAlbum(ownProps.id, ...args))\n})\n\nconst provideProps = connect(\n  mapStateToProps,\n  mapDispatchToProps\n)\n```\n\n## Immutable\nIf your state uses \u003ca href=\"https://facebook.github.io/immutable-js/\"\u003eImmutable.js\u003c/a\u003e, import with `react-redux-collect/immutable`.\n\n## Tricks\n\nCreating `collect` is only necessary if you intend to connect actions as props.  \nOtherwise you can just use the default export.\n```javascript\nimport collect from 'react-redux-collect'\n\n// Ideally a created collect is declared in another file\n// and imported as needed throughout your application.\n```\n\nYou can pass selector functions instead of path arrays.\n```javascript\nimport collect from 'react-redux-collect'\n\nconst selectFirstTrack = state =\u003e state.tracks[0]\n\n// props: { firstTrack: { title: 'Little Fury Things', length: '3:06' } }\nconst provideProps = collect([selectFirstTrack, 'firstTrack'])\n```\n\nYou can spread a state value into props using the string `'...'`.\n```javascript\nimport collect from 'react-redux-collect'\n\n// props: { title: 'Kracked', length: '2:50' }\nconst provideProps = collect([['tracks', 1], '...'])\n```\n\nYou can pass the entirety of state into props using the string `'*'`.\n```javascript\nimport collect from 'react-redux-collect'\n\n// props: {...state}\nconst provideProps = collect('*')\n// NOTE:\n// If state['*'] is not undefined, collect will throw an error\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyoufoundron%2Freact-redux-collect","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyoufoundron%2Freact-redux-collect","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyoufoundron%2Freact-redux-collect/lists"}