{"id":22282598,"url":"https://github.com/carbonfive/rxreact-example","last_synced_at":"2025-03-25T19:44:53.730Z","repository":{"id":66259848,"uuid":"124583519","full_name":"carbonfive/rxreact-example","owner":"carbonfive","description":"Example app using RxReact","archived":false,"fork":false,"pushed_at":"2018-03-09T19:21:35.000Z","size":73,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-01-30T17:36:56.445Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","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/carbonfive.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":"2018-03-09T19:21:15.000Z","updated_at":"2018-03-09T19:21:36.000Z","dependencies_parsed_at":"2023-02-23T09:45:17.712Z","dependency_job_id":null,"html_url":"https://github.com/carbonfive/rxreact-example","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/carbonfive%2Frxreact-example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/carbonfive%2Frxreact-example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/carbonfive%2Frxreact-example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/carbonfive%2Frxreact-example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/carbonfive","download_url":"https://codeload.github.com/carbonfive/rxreact-example/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245534520,"owners_count":20631285,"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":[],"created_at":"2024-12-03T16:33:52.175Z","updated_at":"2025-03-25T19:44:53.707Z","avatar_url":"https://github.com/carbonfive.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# RxReact Example\n\nThis is a sample demonstration of how to use RxReact in a real world context. It is a very simple Typescript app - it reads from a [well known JSON API](https://jsonplaceholder.typicode.com) and offers some simple user interactions.\n\n### Defining Your Domain\n\nBefore we even begin building our app, it's useful to define the types of data encompassed by your application domain. In this case, you can find these types in [domain.ts](src/domain.ts).\n\n### Building A Signal Graph\n\nTypically we place most of our observables in a Signal Graph that represents data relationships in our application. A good place to start in a Typescript application like this one is to define type aliases for the types signals we'll produce. You'll find this in [signalTypes.ts](src/signalGraph/signalTypes.ts). Next we need to define how our signals are produced. While we can simply define them inline, if we create factory functions that return the signals based on the other signals they depend on, they'll be easier to test. You'll find these factories in [signalFactories.ts](src/signalGraph/signalFactories.ts). This is where the bulk of the logic of the signal graph lives. Finally, we instantiate all our signals with our signal factories for use with RxReact in [signalGraph.ts](src/signalGraph/signalGraph.ts).\n\n### Speaking to an HTTP layer\n\nMost frontend applications make AJAX calls to a backend server. In an Rx application, it's helpful to define a layer than translates HTTP calls to Obervable responses. You can see how we construct this layer in [api.ts](src/http/api.ts).\n\n## Connecting to Components\n\nThe last step is to connect your signal graph to components. Fortunately, with RxReact, this is pretty easy! You can see two examples of connected components in Users.tsx and Posts.tsx. Moreover, look at how the signal graph drives the behavior of these components:\n\n* Initially, we just see a user list, rendered by the Users component. This is loaded immediately from the server\n* When you click on a user the selectUser$ signal emits\n* This causes the selectedUser$ signal to become populated, so details about the selected user appear in the User component\n* It also cause the app to fetch posts and their comments for that user through a series of HTTP calls\n* This populates the activePostsWithComments$ signal\n\n### Testing: Unit Test Your Signals \u0026 Components, Functional Test Your App\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcarbonfive%2Frxreact-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcarbonfive%2Frxreact-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcarbonfive%2Frxreact-example/lists"}