{"id":26107130,"url":"https://github.com/lukkien/redux-needs","last_synced_at":"2026-05-06T00:06:44.559Z","repository":{"id":57351100,"uuid":"96300756","full_name":"LUKKIEN/redux-needs","owner":"LUKKIEN","description":"🎁  Wrapping everyday data to your containers in need 🎁","archived":false,"fork":false,"pushed_at":"2017-12-18T16:49:20.000Z","size":149,"stargazers_count":3,"open_issues_count":2,"forks_count":0,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-03-09T22:43:21.482Z","etag":null,"topics":["higher-order-component","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":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/LUKKIEN.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-07-05T09:14:59.000Z","updated_at":"2018-04-22T11:51:19.000Z","dependencies_parsed_at":"2022-09-17T22:20:58.138Z","dependency_job_id":null,"html_url":"https://github.com/LUKKIEN/redux-needs","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LUKKIEN%2Fredux-needs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LUKKIEN%2Fredux-needs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LUKKIEN%2Fredux-needs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LUKKIEN%2Fredux-needs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LUKKIEN","download_url":"https://codeload.github.com/LUKKIEN/redux-needs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242762739,"owners_count":20181266,"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":["higher-order-component","react","redux"],"created_at":"2025-03-09T22:43:24.040Z","updated_at":"2026-05-06T00:06:44.517Z","avatar_url":"https://github.com/LUKKIEN.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# redux-needs \u0026middot; [![Build Status](https://travis-ci.org/LUKKIEN/redux-needs.svg?branch=master)](https://travis-ci.org/LUKKIEN/redux-needs) [![codecov](https://codecov.io/gh/LUKKIEN/redux-needs/branch/master/graph/badge.svg)](https://codecov.io/gh/LUKKIEN/redux-needs) [![david-dm](https://david-dm.org/LUKKIEN/redux-needs.svg)](https://david-dm.org/LUKKIEN/redux-needs) \n\n\u003e 🎁 Wrapping everyday data to your containers in need 🎁\n\nBind actions to changes in your Redux state based on the needs of your active\nRedux components.\n\n[Usage](#usage) |\n[API](#api) |\n[Installation](#installation) |\n[License](#license)\n\n## Usage\n\n### Simple binding\n\nDispatch the `ping` action when `MyComponent` is mounted.\n\n```js\nimport React from 'react';\nimport needs from 'redux-needs';\n\nconst ping = () =\u003e ({\n  type: 'PING',\n});\n\nconst MyComponent = () =\u003e (\n  \u003ch1\u003eHello, world!\u003c/h1\u003e\n);\n\nexport default needs([ ping ])(MyComponent);\n\n```\n\n### Complex binding\n\nDispatch the `ping` action when `MyComponent` is mounted and again every\ntime the value of the `name` property changes.\n\n```js\nimport React from 'react';\nimport needs from 'redux-needs';\n\nconst ping = () =\u003e ({\n  type: 'PING',\n});\n\nconst MyComponent = ({ name }) =\u003e (\n  \u003ch1\u003eHello, { name }!\u003c/h1\u003e\n);\n\nMyComponent.defaultProps = {\n  name: 'world',\n};\n\nexport default needs({\n    props: [ 'name' ],\n    action: ping,\n})(MyComponent);\n\n```\n\n## API\n\n### const binder = needs(bindings);\n\nReturns a new binder method which, when called with a component, will return the\ncomponent wrapped with the configured bindings. This method is compatible with\nthe [Redux compose](http://redux.js.org/docs/api/compose.html#composefunctions)\nmethod.\n\n- `bindings` (required) - an array containing [bindings](#bindings)\n\n### Bindings\n\n#### Simple bindings\n\nSimple bindings will trigger an action only once: when the component is mounted.\n\nTo add a simple binding just add an [action creator](http://redux.js.org/docs/basics/Actions.html#action-creators)\nto the array of bindings. When the component is mounted the action creator will\nbe called with `this.props` and the resulting action will be dispatched.\n\nGo to [the example](#simple-binding).\n\n#### Complex bindings\n\nComplex bindings will trigger an action when the component is mounted and again\nwhen one or more of the bound properties change.\n\nTo add a complex binding add an object to array of bindings with two properties:\n* `action` - the [action creator](http://redux.js.org/docs/basics/Actions.html#action-creators)\n* `props` - an array of strings describing the properties of the component to\nwatch\n\nThe `prop` field can contain nested properties. For example; given the following\nobject, the `c` property with a value of `3` can be bound to using `a[0].b.c`:\n\n```js\n{\n  \"a\": [\n    { \"b\": { \"c\": 3 } },\n    { \"b\": { \"c\": 4 } }\n  ],\n  \"d\": 5\n};\n```\n\nWhen binding to specific values, the action creator will be called with a subset\nof `this.props` matching the bound property paths. In the case of the previous\nexample, this would mean the action creator would be called with the follwing\nobject:\n\n```js\n{\n  \"a\": [\n    { \"b\": { \"c\": 3 }\n  ]\n}\n```\n\n**Note:** the action creators will sometimes be called even if the action will\nnot be dispatched. As this could potentially be every time `componentWillUpdate`\nis called on your component, your action creators should be lightweigth methods.\n\nGo to [the example](#complex-binding).\n\n## Installation\n\nWith [npm](https://npmjs.org/) installed, run\n\n```\n$ npm install redux-needs\n```\n\nOr with [yarn](https://yarnpkg.com/) installed, run\n\n```\n$ yarn add redux-needs\n```\n\n## Peer dependencies\n\nThis library uses the following peer dependencies, which will probably already\nbe included in your project if it's uses Redux and React:\n\n* _react_: 15.5.x\n* _react-redux_: 5.x.x\n* _redux_: 3.7.x\n\n## License\n\nThe `redux-needs` package is distributed under the 3-Clause BSD License.\nCheck the [LICENSE](LICENSE) file for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flukkien%2Fredux-needs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flukkien%2Fredux-needs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flukkien%2Fredux-needs/lists"}