{"id":20646092,"url":"https://github.com/joefiorini/react-redux-presenters","last_synced_at":"2026-05-05T04:08:34.832Z","repository":{"id":66384336,"uuid":"101764716","full_name":"joefiorini/react-redux-presenters","owner":"joefiorini","description":"Functional library for separating state \u0026 behavior from react components","archived":false,"fork":false,"pushed_at":"2017-08-31T14:15:10.000Z","size":23,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-01-17T09:36:28.704Z","etag":null,"topics":["javascript","presenters","react","react-redux","redux","ui"],"latest_commit_sha":null,"homepage":"https://github.com/joefiorini/react-redux-presenters","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/joefiorini.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-08-29T13:30:40.000Z","updated_at":"2017-08-29T14:06:31.000Z","dependencies_parsed_at":"2023-02-24T22:45:55.931Z","dependency_job_id":null,"html_url":"https://github.com/joefiorini/react-redux-presenters","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joefiorini%2Freact-redux-presenters","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joefiorini%2Freact-redux-presenters/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joefiorini%2Freact-redux-presenters/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joefiorini%2Freact-redux-presenters/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/joefiorini","download_url":"https://codeload.github.com/joefiorini/react-redux-presenters/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242714052,"owners_count":20173581,"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":["javascript","presenters","react","react-redux","redux","ui"],"created_at":"2024-11-16T16:23:51.342Z","updated_at":"2025-09-19T11:11:42.568Z","avatar_url":"https://github.com/joefiorini.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-redux-presenters\nFunctional library for separating state \u0026amp; behavior from react components\n\nThis library aims to help keep your React components clean by providing a consistent pattern for managing redux `mapStateToProps`/`mapDispatchToProps` boilerplate.\n\nCurrently this library only contains a couple primitives, but as we gather more use cases, we will be adding more.\n\n## Presenters\n\nThe [presenter pattern](https://martinfowler.com/eaaDev/SupervisingPresenter.html) (also called \"supervising controller\") abstracts the management of view data \u0026 behavior to a separate module. The view itself is responsible for directly responding to user interaction, but it then delegates to the presenter for performing updates based on this interaction. This separation makes complex components easier to understand and makes it easier to test complex logic.\n\nThis library implements this pattern for your react components. It is based on, and assumes the use of, [react-redux](/reactjs/react-redux). The presenter will import the `connect` function from react-redux and build the `mapStateToProps` and `mapDispatchToProps` that you would normally do in the component.\n\n### Implementation\n\nThe basic implementation, without using this library, looks like:\n\n```javascript\nimport { connect } from 'react-redux';\nimport { toggleTodo } from '../actions';\n\nconst getVisibleTodos = (todos, filter) =\u003e {\n  switch (filter) {\n    case 'SHOW_ALL':\n      return todos\n    case 'SHOW_COMPLETED':\n      return todos.filter(t =\u003e t.completed)\n    case 'SHOW_ACTIVE':\n      return todos.filter(t =\u003e !t.completed)\n  }\n}\n\nconst mapStateToProps = state =\u003e {\n  return {\n    todos: getVisibleTodos(state.todos, state.visibilityFilter)\n  }\n}\n\nconst mapDispatchToProps = dispatch =\u003e {\n  return {\n    onTodoClick: id =\u003e {\n      dispatch(toggleTodo(id))\n    }\n  }\n}\n\nexport default {\n  connect: connect(mapStateToProps, mapDispatchToProps)\n};\n```\n\nThen you can connect your component to the presenter like so:\n\n```javascript\nimport React from 'react';\nimport presenter from './presenter';\n\nfunction VisibleTodos({ todos, onTodoClick }) {\n  return (\n    // Markup for Todo list here\n  );\n}\n\nexport default presenter.connect(VisibleTodos);\n```\n\n### This Library\n\nSo why have a library? \n\n1. There are a number of different ways to structure data in a redux store. We want to provide abstractions to make creating presenters for these structures easy.\n2. Sometimes you may need to reuse the same presenter patterns in multiple presenters; the functional answer to reusability is composition. Therefore, this library provides a helper that allows you create presentational primitives and compose them into a single presenter.\n\n### Contributing\n\nThis library currently is very limited. It merely provides the `composePresenters` function and a helper for creating presenters if you use the `normalizer` format of structuring your redux store. If you are interested in helping out with this please drop me a line (I have contact info in my profile) or open an issue/PR explaining your use case and how we might be able to make it easier.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjoefiorini%2Freact-redux-presenters","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjoefiorini%2Freact-redux-presenters","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjoefiorini%2Freact-redux-presenters/lists"}