samsch

Is it unreasonable to have data that only exist in your selectors and as props passed down from them? For example, I might have a short list of possible items. An action creator sends the new item. The reducer replaces the state with the new item. The component could have the list of items itself, but then it's not associated with state as much as the component. If the list comes from the selector, it's more associated with the state, and can be used in multiple components.

• Seems like it should be able to work.
• One concern could be that the selector might be doing a job it shouldn't be.
• The counter argument is that if you don't put it in the selector, it would need to go somewhere else, namely a component or in the state. If it's not stateful information, in the state doesn't make sense. If the component is supposed to be reusable with different list, then it doesn't make sense there either. The possible answer here is that it would go in a higher-order component or container.

>samssh, yeah you make a

samsch

Specifically, read this if you are considering turning on and using pre-stage 4 features with Babel.

What are these stages?

If an item is at stage 4, it's finalized and ready to be included in the next iteration of the Javascript standard. These should always be as safe to use as current standard features. Features at stage 4 were pulled for ES2015 and ES2016 around January/Febuary of that year. It's reasonable to expect the same for ES2017, ES2018, etc.

If it's at stage 3, it shouldn't change much or at all, but it's not final. Stage 2 and lower are up for changes as needed. You can read the full process here.

If something that is implemented in Babel (pre-stage 4) is changed, or removed, what happens?

samsch

const React = require('react');
const ReactDOM = require('react-dom');

class Component extends React.Component {
    constructor(props) {
        super(props);
        this.handleButton = this.handleButton.bind(this);
    }
    handleButton(ev) {
        //name needs to be cast to an int since attributes are all strings.

samsch

let React = require('react');
let ReactDOM = require('react-dom');
let { createStore } = require('redux');
let { Provider } = require('react-redux');
let reducer = require('./RootReducer');
let App = require('./containers/App');

let SocketThing = require('socket-thing');

let store = createStore(reducer);

samsch

const React = require('react');

class NewComponent extends React.Component {
    constructor(props) {
        super(props);
        this.onMouseOver = this.onMouseOver.bind(this);
    }
    onMouseOver() {
        this.props.onMouseOver(this.props.id);
    }

samsch

const React = require('react');

const Menus = props => <div>
  {this.props.menus.map(menu=>
    <div className={this.props.openMenus.includes(menu.name) ? 'open' : ''}>
      {menu.name}{menu.children.length > 0 ? <Menus menus={menu.children} openMenus={this.props.openMenus} /> : null}
    </div>
  )}
</div>

samsch

const React = require('react');

class ButtonWrapper extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    this.props.onClick(this.props.id);
  }

samsch

import React from 'react';
import ReactDOM from 'react-dom';
import Router from 'routes';

ReactDOM.render(
  <Router />,
  document.body
);

samsch

1. Delete all containers

    $ docker ps -q -a | xargs docker rm
   

-q prints only the container IDs -a prints all containers

Notice that it uses xargs to issue a remove container command for each container ID

2. Delete all untagged images

samsch

    <Router history={hashHistory}>
        <Route path="/" component={Layout}>
            <IndexRoute component={Dashboard}></IndexRoute>
            <Route path="Login" component={Login}></Route>
            <Route path="accounting">
                <Route path="authorize-orders" component={AuthorizeOrders}></Route>
                <Route path="credit-transaction" component={CreditCcTransaction}></Route>
                <Route path="authorize-card" component={Sale}/>
                <Route path="authorize-card/select-invoices" component={SaleSelectInvoices}></Route>
                <Route path="void-transaction" component={VoidCcTransaction}></Route>