{"id":18321296,"url":"https://github.com/rohan-deshpande/trux","last_synced_at":"2025-04-05T22:32:21.425Z","repository":{"id":57380355,"uuid":"50758460","full_name":"rohan-deshpande/trux","owner":"rohan-deshpande","description":"Unidirectional data layer for reactive user interfaces","archived":false,"fork":false,"pushed_at":"2017-05-04T21:59:06.000Z","size":1238,"stargazers_count":59,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-05-22T12:05:37.797Z","etag":null,"topics":["component-driven","graphql","react","rest-api","state-management","unidirectional-data-flow","vue"],"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/rohan-deshpande.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-01-31T04:17:25.000Z","updated_at":"2021-12-28T07:49:43.000Z","dependencies_parsed_at":"2022-08-28T21:22:30.240Z","dependency_job_id":null,"html_url":"https://github.com/rohan-deshpande/trux","commit_stats":null,"previous_names":[],"tags_count":17,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rohan-deshpande%2Ftrux","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rohan-deshpande%2Ftrux/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rohan-deshpande%2Ftrux/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rohan-deshpande%2Ftrux/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rohan-deshpande","download_url":"https://codeload.github.com/rohan-deshpande/trux/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247411234,"owners_count":20934650,"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":["component-driven","graphql","react","rest-api","state-management","unidirectional-data-flow","vue"],"created_at":"2024-11-05T18:18:58.271Z","updated_at":"2025-04-05T22:32:21.042Z","avatar_url":"https://github.com/rohan-deshpande.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# [Trux](https://github.com/rohan-deshpande/trux)\n\n### `API ⇆ Trux ➝ UI`\n\nUnidirectional data layer for reactive user interfaces.\n\n[![Build Status](https://travis-ci.org/rohan-deshpande/trux.svg?branch=master)](https://travis-ci.org/rohan-deshpande/trux)\n[![Coverage Status](https://coveralls.io/repos/github/rohan-deshpande/trux/badge.svg?branch=master\u0026v=3e8eb2e)](https://coveralls.io/github/rohan-deshpande/trux?branch=master)\n[![Dependency Status](https://david-dm.org/rohan-deshpande/trux.svg)](https://david-dm.org/rohan-deshpande/trux)\n[![npm version](https://badge.fury.io/js/trux.svg)](https://badge.fury.io/js/trux)\n\n## Introduction\n\nTrux is an easy-to-use, lightweight and effective way of managing mutable data for your client side JavaScript app.\n\nWith its focus placed on enabling the creation of fully customisable bridges between your API and UI, Trux provides convenient and safe ways to mutate data and synchronise these mutations with your components.\n\n**With Trux, your data stores become the sources of truth for your app's data driven user interfaces.** All you need to do is create some stores, connect components to them and let it do the work.\n\nWhile it was designed with [React](https://rohan-deshpande.gitbooks.io/trux/content/usage/react.html) and a REST API in mind, Trux can also be used with other view libraries and API systems such as [Vue](https://rohan-deshpande.gitbooks.io/trux/content/usage/vue.html\n) and [GraphQL](https://rohan-deshpande.gitbooks.io/trux/content/usage/graphql.html).\n\nWant to learn more? Checkout the [quickstart](#quickstart) guide below or get an in-depth look by reading the [docs](https://rohan-deshpande.gitbooks.io/trux/content/).\n\n## Installation\n\n```bash\nnpm i -S trux\n```\n\n#### Polyfills\n\nIn order to support older browsers you'll need some polyfills\n\n* [fetch](https://github.com/github/fetch)\n* [Promise](https://github.com/taylorhakes/promise-polyfill)\n\n## Quickstart\n\nIn Trux, your client side data is kept in **stores** called **models** or **collections**. You `connect` components to these stores and ask the stores to perform data changes. Your stores can `persist` these changes to their connected components. You can choose to make these updates either **optimistic** or **pessimistic**.\n\nHere's the basic gist, without considering requests to an API\n\n```js\nimport { Model } from 'trux';\n\n// First we're going to create a Counter model with some starting data.\n// By extending the Trux Model class, we get all the functionality we need plus we can add custom methods,\n// like the increment and decrement methods which mutate the state of the model.\nclass Counter extends Model {\n  constructor() {\n    super({ value: 0 });\n  }\n\n  increment() {\n    this.data.value++;\n    return this;\n  }\n\n  decrement() {\n    this.data.value--;\n    return this;\n  }\n}\n\n// Instantiate the store\nconst store = new Counter();\n\n// Now we are going to create a mock component to connect to our store.\n// We need to declare a unique truxid and a storeDidUpdate method to receive updates from the store.\nconst component = {\n  truxid: 'TICKER',\n  storeDidUpdate: () =\u003e {\n    console.log(model.data.value);\n  }\n};\n\n// connect the component to the store.\nstore.connect(component);\n// call the increment and decrement methods then chain persist to see the new value get logged.\nstore.increment().persist(); // 1\nstore.increment().persist(); // 2\nstore.decrement().persist(); // 1\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frohan-deshpande%2Ftrux","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frohan-deshpande%2Ftrux","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frohan-deshpande%2Ftrux/lists"}