https://github.com/simonihmig/tracked-redux
Autotracked Redux
https://github.com/simonihmig/tracked-redux
Last synced: 9 months ago
JSON representation
Autotracked Redux
- Host: GitHub
- URL: https://github.com/simonihmig/tracked-redux
- Owner: simonihmig
- License: mit
- Created: 2020-04-12T14:26:04.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-03-04T15:07:33.000Z (over 3 years ago)
- Last Synced: 2025-08-30T12:43:20.599Z (10 months ago)
- Language: JavaScript
- Size: 3.4 MB
- Stars: 29
- Watchers: 3
- Forks: 3
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
- awesome-list - tracked-redux
README
tracked-redux
==============================================================================
[](https://github.com/simonihmig/tracked-redux/actions/workflows/ci.yml)
This Ember addon provides an autotracked version of [Redux](https://redux.js.org/).
Compatibility
------------------------------------------------------------------------------
* Ember.js v3.24 or above
* Embroider or ember-auto-import v2
Installation
------------------------------------------------------------------------------
```
ember install tracked-redux
```
Usage
------------------------------------------------------------------------------
```js
import { createStore } from 'tracked-redux';
const store = createStore((state = { todos: [] }, action) => {
if (action.type === 'ADD_TODO') {
return { todos: [...state.todos, action.todo] };
}
return state;
});
class Example extends Component {
get todos() {
return store.getState().todos;
}
@action addTodo(todo) {
store.dispatch({ type: 'ADD_TODO', todo });
}
}
```
The API is the same as Redux in every way, with the only difference being that
the state tree returned by `getState` is deeply autotracked. Accessing values on
it will entangle with any autotracking that is active. When actions are
dispatched and the state tree is updated, only the values that are _changed_
will dirty.
For more detailed usage instructions an examples, see the
[Redux documentation](https://redux.js.org/introduction/getting-started).
Debugging
------------------------------------------------------------------------------
Tracked Redux works by using [JavaScript Proxies](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy),
which is how it is able to only dirty the state that has actually changed in the
state tree. However, proxies do not display well in the console:
Tracked Redux ships with a custom console formatter for Chrome devtools to make
these proxies appear nicer and easier to understand:
Custom formatters have to be enabled in the devtools settings:
Contributing
------------------------------------------------------------------------------
See the [Contributing](CONTRIBUTING.md) guide for details.
License
------------------------------------------------------------------------------
This project is licensed under the [MIT License](LICENSE.md).