How to use ember-redux - 10 common examples

const entities = ['datasets', 'metrics', 'flows']; // hardcoded here to maintain the sort order
/**
 * Selector function that takes a Redux Store to extract
 *   state props for the browser-view
 * @param {Object} browseData
 * @return {Object}
 */
const stateToComputed = ({ browse: { browseData = {} } = {} }) => ({
  browseData: entities.map(browseDatum =>
    Object.assign(
      { entity: browseDatum }, // assigns key name to resulting object
      browseData[browseDatum]
    )
  )
});
export default connect(stateToComputed)(Component.extend({}));

const { [currentEntity]: { byId: entities } } = state;
  /**
   * Takes the currentEntity which is plural and strips the trailing `s` and appends
   *   the entity sub route
   * @type {string}
   */
  const entityRoute = `${currentEntity}.${currentEntity.slice(0, -1)}`;

  return {
    currentEntity,
    entityRoute,
    entities: childIds.map(id => entities[id]) // Extract out the intersection of childIds from the entity map
  };
};

export default connect(stateToComputed)(Component.extend({}));

*   and related state
 * @return {{datasets: (any[]|Array), isFetching: boolean}}
 */
const stateToComputed = ({ datasets }) => {
  const { byPage, byId, currentPage, isFetching = false } = datasets;
  // List of datasets for the current Page
  const pagedDatasetIds = byPage[currentPage] || [];

  return {
    // Takes the normalized list of ids and maps to dataset objects
    datasets: pagedDatasetIds.map(datasetId => byId[datasetId]),
    isFetching
  };
};

export default connect(stateToComputed)(Component.extend({}));

if (selectedMetricIds.includes(id)) {
          relatedMetric.isSelected = true;
        }

        return relatedMetric;
      }).filter(metric => metric && metric.metricName)
  };
}

// no action defined for this container
function actions() {
  return {};
}

export default connect(select, actions)(Component.extend({
}));

import hbs from 'htmlbars-inline-precompile';
import { connect } from 'ember-redux';

var stateToComputed = (state) => {
  return {
    user: state.users.selected
  };
};

var UserDetailComponent = Component.extend({
  layout: hbs`
    <span class="user-detail-name" style="color: blue;">{{user.name}}</span>
  `
});

export default connect(stateToComputed)(UserDetailComponent);

import Component from '@ember/component';
import { connect } from 'ember-redux';
import { edit, destroy, toggle } from 'example-app/src/redux-store/todos';

const dispatchToActions = (dispatch) => ({
  deleteTodo: (id: number) => dispatch(destroy(id)),
  completeTodo: (id: number) => dispatch(toggle(id)),
  editTodo: (id: number, text: string) => dispatch(edit(id, text))
});

class TodoItemContainer extends Component {}
export default connect(null, dispatchToActions)(TodoItemsContainer);

import Component from '@ember/component';
import { action } from '@ember-decorators/object';

import { connect } from 'ember-redux';
import { edit, destroy, toggle } from 'example-app/src/redux-store/todos';

const dispatchToActions = (dispatch: any) => ({
  deleteTodo: (id: number) => dispatch(destroy(id)),
  completeTodo: (id: number) => dispatch(toggle(id)),
  editTodo: (id: number, text: string) => dispatch(edit(id, text))
});

@connect(null, dispatchToActions)
export default class TodoItemContainer extends Component {
  tagName = 'li';
  editing = false;
  classNameBindings = ['todo.completed', 'editing'];

  @action
  startEditing(this: TodoItemContainer) {
    this.set('editing', true);
  }

  @action
  doneEditing(this: TodoItemContainer) {
    this.set('editing', false);
  }
}

import Component from '@ember/component';
import { action } from '@ember-decorators/object';
import { connect } from 'ember-redux';

import { add as addTodo } from 'example-app/src/redux-store/todos';

const dispatchToActions = { addTodo };

@connect(null, dispatchToActions)
export default class Header extends Component {
  text = '';

  @action
  didSubmit(this: Header) {
    this.actions.addTodo(this.text);
    this.set('text', '');
  }
}

return Object.assign({}, idNode, {
        route: `${currentEntity}.${singularName}`,
        model: id
      });
    }

    return Object.assign({}, node, {
      route: `browse.entity`,
      model: currentEntity,
      queryParams: nodeUrlToQueryParams(nodeUrl)
    });
  });

  return { nodes, header };
};
export default connect(stateToComputed)(Component.extend({}));

eventEnd,
    events: events.map((event) => {
      event = Object.assign({}, event);
      if (selectedEvents.includes(event.urn)) {
        event.isSelected = true;
      }
      return event;
    })
  };
}

function actions() {
  return {};
}

export default connect(select, actions)(Component.extend({
}));