{"id":13781321,"url":"https://github.com/bowheart/react-zedux","last_synced_at":"2025-08-21T12:33:39.394Z","repository":{"id":57347915,"uuid":"118282874","full_name":"bowheart/react-zedux","owner":"bowheart","description":"ATTENTION! This is the old repository. The Zedux React package has moved to https://github.com/omnistac/zedux/tree/master/packages/react","archived":false,"fork":false,"pushed_at":"2023-04-13T23:22:42.000Z","size":880,"stargazers_count":8,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-11-17T16:42:38.074Z","etag":null,"topics":["fractal","hoc","observable","react","redux","render-props","store-hierarchy","time-travel","zedux"],"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/bowheart.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2018-01-20T21:39:10.000Z","updated_at":"2023-04-20T17:48:35.000Z","dependencies_parsed_at":"2024-01-15T20:54:48.137Z","dependency_job_id":"8d4887c9-7000-4126-8136-5e7cc2040838","html_url":"https://github.com/bowheart/react-zedux","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/bowheart%2Freact-zedux","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bowheart%2Freact-zedux/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bowheart%2Freact-zedux/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bowheart%2Freact-zedux/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bowheart","download_url":"https://codeload.github.com/bowheart/react-zedux/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225844790,"owners_count":17533161,"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":["fractal","hoc","observable","react","redux","render-props","store-hierarchy","time-travel","zedux"],"created_at":"2024-08-03T18:01:24.857Z","updated_at":"2024-11-22T05:15:34.007Z","avatar_url":"https://github.com/bowheart.png","language":"JavaScript","funding_links":[],"categories":["Libraries","List"],"sub_categories":[],"readme":"# [DEPRECATED]\n\nThis repo has moved to [`Omnistac/zedux`](https://github.com/omnistac/zedux) - specifically the [`react` package](https://github.com/omnistac/zedux/tree/master/packages/react).\n\n# React Zedux\n\n[![Build Status](https://travis-ci.org/bowheart/react-zedux.svg?branch=master)](https://travis-ci.org/bowheart/react-zedux)\n[![Test Coverage](https://api.codeclimate.com/v1/badges/0459ebf8444c36752eac/test_coverage)](https://codeclimate.com/github/bowheart/react-zedux/test_coverage)\n[![Maintainability](https://api.codeclimate.com/v1/badges/0459ebf8444c36752eac/maintainability)](https://codeclimate.com/github/bowheart/react-zedux/maintainability)\n[![npm](https://img.shields.io/npm/v/react-zedux.svg)](https://www.npmjs.com/package/react-zedux)\n\nModular and composable state-binding power. These are the official React bindings for [Zedux](https://github.com/bowheart/zedux).\n\n## Installation\n\nInstall using npm:\n\n```bash\nnpm install --save react-zedux\n```\n\nOr yarn:\n\n```bash\nyarn add react-zedux\n```\n\nOr include the appropriate unpkg build on your page (module exposed as `ReactZedux`):\n\n### Development\n\n```html\n\u003cscript src=\"https://unpkg.com/react-zedux/dist/react-zedux.js\"\u003e\u003c/script\u003e\n```\n\n### Production\n\n```html\n\u003cscript src=\"https://unpkg.com/react-zedux/dist/react-zedux.min.js\"\u003e\u003c/script\u003e\n```\n\n## Getting started\n\nTo learn by example, check out the [examples in the Zedux repo](https://github.com/bowheart/zedux/tree/master/examples) \u0026ndash; they use React Zedux quite heavily.\n\nTo learn by getting dirty, fiddle with [this codepen](https://codepen.io/bowheart/pen/MrKMmw?editors=0010).\n\nTo learn from us, check out the [documentation](https://bowheart.github.io/react-zedux/gettingStarted/overview).\n\nTo learn comprehensively, check out the [tests](https://github.com/bowheart/react-zedux/tree/master/test).\n\nOr keep reading for a brief run-down:\n\n## Quick start\n\nA Zedux app has many stores composed together in a store hierarchy. A React app has many components composed together in a component hierarchy. A React Zedux app ties the two hierarchies together at various points. These \"tie-in\" points are called Providers.\n\nA Provider is just a special component that \"provides\" an observable (e.g. a Zedux store) to its descendants.\n\nAny descendant that accesses the provided observable is called a Consumer.\n\nAnd that's really it! At a high level, you now know just about everything about React Zedux.\n\n\u003e React Zedux uses the [new context api](https://github.com/facebook/react/issues/12152) of React 16.3. As such, it is (currently) incompatible with earlier versions of React. The React Zedux api is heavily based off the new context api. So if you're familiar with it, you'll feel right at home!\n\n### A basic example\n\n```js\nimport React from 'react'\nimport { createContext } from 'react-zedux'\nimport { createStore } from 'zedux'\n\n/*\n  React Zedux creates consumable contexts from observables.\n  Here we're using a global Zedux store. But we could use\n  any observable (e.g. from RxJS or a Redux store).\n*/\nconst store = createStore().hydrate('world')\n\n/*\n  Meet the Context. This guy makes our dreams come true.\n  Just pass the observable to createContext() and React Zedux\n  will handle subscribing and reacting to updates.\n*/\nconst Context = createContext(store)\n\n/*\n  The Context works just like a normal React Context object.\n  We just provide and consume it:\n*/\nconst HelloWorld = () =\u003e (\n  \u003cContext.Provider\u003e\n    \u003cContext.Consumer\u003e{store =\u003e 'hello ' + store.getState()}\u003c/Context.Consumer\u003e\n  \u003c/Context.Provider\u003e\n)\n```\n\nReact Zedux actually has a shorthand for this \"provide and consume\" scenario:\n\n```js\nconst HelloWorld = () =\u003e (\n  \u003cContext.Injector\u003e{store =\u003e 'hello ' + store.getState()}\u003c/Context.Injector\u003e\n)\n```\n\nWe can use `\u003cContext.Injector\u003e` to simultaneously provide and consume the store. This is mostly just for your prototyping pleasure, though it certainly has some uses (e.g. encouraging a strict separation of data and ui and allowing a parent Provider to also consume the observable it provides).\n\nTypically we'll use a `\u003cContext.Provider\u003e` together with any number of `\u003cContext.Consumer\u003e`s. The power of Consumers, of course, is that they can consume the provided observable even as a deeply nested descendant of the Provider.\n\n### Higher-Order Components\n\nWe can consume a Context by using either render props or Higher-Order Components. The following two examples are equivalent:\n\n**Render prop:**\n\n```js\nimport Context from './contexts/Context'\n\nconst App = () =\u003e (\n  \u003cContext.Injector\u003e\n    {store =\u003e\n      // This function-as-child is a render prop.\n      // A wrapped form of the Context's observable is\n      // passed to this function.\n      store.getState()\n    }\n  \u003c/Context.Injector\u003e\n)\n```\n\n**HOC:**\n\n```js\nimport Context from './contexts/Context'\n\n// Context.inject() is an HOC alternative to \u003cContext.Injector\u003e\n// The render prop is now gone. In its place, we're telling React\n// Zedux to pass the store to the wrapped component as a normal\n// prop called \"store\"\nconst App = Context.inject('store')(({ store }) =\u003e store.getState())\n```\n\nSee the [inject HOC documentation](https://bowheart.github.io/react-zedux/types/context/inject) for more info on this guy. Also see the [consume HOC](https://bowheart.github.io/react-zedux/types/context/inject) for all possible overloads of `Context.inject()`.\n\n### The Context object\n\nThe [Context object](https://bowheart.github.io/react-zedux/types/Context) returned by `createContext()` contains 3 React (First-Order) components:\n\n```js\nimport { createContext } from 'react-zedux'\nimport { createStore } from 'zedux'\n\nconst Context = createContext(createStore())\n\nContext.Provider // provides the observable to descendants\nContext.Consumer // consumes a provided observable\nContext.Injector // a shorthand for providing and consuming\n```\n\nand 3 Higher-Order Components:\n\n```js\nContext.provide\nContext.consume()\nContext.inject()\n```\n\n\u003e Note that unlike `Context.consume()` and `Context.inject()`, `Context.provide` is not curried.\n\nYou can get by with just `\u003cContext.Provider\u003e` and `\u003cContext.Consumer\u003e`. The rest is just sugar, but it definitely comes in handy.\n\nSee the [Context documentation](https://bowheart.github.io/react-zedux/types/Context).\n\n### Render props!\n\n`\u003cContext.Consumer\u003e` and `\u003cContext.Injector\u003e` take a single function as their only child. This is the [render prop technique](https://reactjs.org/docs/render-props.html). It works exactly like React's `\u003cContext.Consumer\u003e`. This function will be called every time the context's obervable emits (read: \"the store's state updates\").\n\nRender props are awesome, but they can lead to rightward code drift. You could use another library such as [react-composer](https://github.com/jamesplease/react-composer) to prevent this. But we could just as easily use the Zedux `compose()` utility with the Context's Higher-Order Components:\n\n```js\nimport { createContext } from 'react-zedux'\nimport { compose, createStore } from 'zedux'\n\nconst HelloContext = createContext(createStore().hydrate('hello'))\nconst WorldContext = createContext(createStore().hydrate('world'))\n\nconst HelloWorld = compose(\n  HelloContext.inject('helloStore'),\n  WorldContext.inject('worldStore')\n)(\n  ({ helloStore, worldStore }) =\u003e\n    `${helloStore.getState()} ${worldStore.getState()}`\n)\n```\n\nThe render props are now gone, replaced with normal, explicitly named props. This HelloWorld component is equivalent to:\n\n```js\nconst HelloWorld = () =\u003e (\n  \u003cHelloContext.Provider\u003e\n    \u003cHelloContext.Consumer\u003e\n      {helloStore =\u003e (\n        \u003cWorldContext.Provider\u003e\n          \u003cWorldContext.Consumer\u003e\n            {worldStore =\u003e `${helloStore.getState()} ${worldStore.getState()}`}\n          \u003c/WorldContext.Consumer\u003e\n        \u003c/WorldContext.Provider\u003e\n      )}\n    \u003c/HelloContext.Consumer\u003e\n  \u003c/HelloContext.Provider\u003e\n)\n```\n\nYou can see why React Zedux offers some sugar.\n\n### Summary\n\nWe use [`createContext()`](https://bowheart.github.io/react-zedux/api/createContext) to create a Context from an observable or StoreApi.\n\nWe use [`\u003cContext.Provider\u003e`](https://bowheart.github.io/react-zedux/types/context/Provider) to provide the observable to descendants.\n\nWe use [`\u003cContext.Consumer\u003e`](https://bowheart.github.io/react-zedux/types/context/Consumer) to consume a provided observable.\n\nWe use [`\u003cContext.Injector\u003e`](https://bowheart.github.io/react-zedux/types/context/Injector) to simultaneously provide and consume the store.\n\n[`Context.provide`](https://bowheart.github.io/react-zedux/types/context/provide), [`Context.consume()`](https://bowheart.github.io/react-zedux/types/context/consume), and [`Context.inject()`](https://bowheart.github.io/react-zedux/types/context/inject) are alternatives to their First-Order counterparts, with a few added features.\n\nWe didn't get to [component-bound stores](https://bowheart.github.io/react-zedux/api/StoreApi), [time travel](https://bowheart.github.io/react-zedux/guides/timeTravel), or general [usage with observables](https://bowheart.github.io/react-zedux/guides/usingObservables), but check all that out in the [full documentation](https://bowheart.github.io/react-zedux/gettingStarted/gettingStarted/overview)!\n\n### Notes\n\nWe used zero configuration patterns in all these examples. This was for simplicity, of course. Don't let this fool you! Every one of these stores is capable of containing every last speck of Zedux awesomeness.\n\nWe also didn't name our wrapped function components. We should.\n\n## Contributing\n\nAll contributions on any level are most welcome. Just jump right in. Open an issue. PRs, just keep the coding style consistent and the tests at 100% (branches, functions, lines, everything 100%, plz). Let's make this awesome!\n\nBugs can be submitted to https://github.com/bowheart/react-zedux/issues\n\n## License\n\nThe [MIT License](https://github.com/bowheart/react-zedux/blob/master/LICENSE.md).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbowheart%2Freact-zedux","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbowheart%2Freact-zedux","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbowheart%2Freact-zedux/lists"}