This Ember addon provides an autotracked version of Redux.
- Ember.js v3.24 or above
- Embroider or ember-auto-import v2
ember install tracked-redux
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.
Tracked Redux works by using JavaScript Proxies, 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:
See the Contributing guide for details.
This project is licensed under the MIT License.