Skip to content

simonihmig/tracked-redux

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

tracked-redux

CI

This Ember addon provides an autotracked version of Redux.

Compatibility

  • Ember.js v3.24 or above
  • Embroider or ember-auto-import v2

Installation

ember install tracked-redux

Usage

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.

Debugging

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:

Image of proxy logged in console

Tracked Redux ships with a custom console formatter for Chrome devtools to make these proxies appear nicer and easier to understand:

Image of proxy logged in console

Custom formatters have to be enabled in the devtools settings:

Image of proxy logged in console

Contributing

See the Contributing guide for details.

License

This project is licensed under the MIT License.