trying out redux

oneshot-naive.tsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';

const getThings = (): Promise<Array<string>> => new Promise((resolve) => {
    setTimeout(() => resolve(['a', 'b', 'c']), 500);
});

interface AppState {
    loading: boolean;
    things: Array<string>;
}

class App extends React.Component<{}, AppState> {
    constructor(props: {}) {
        super(props);
        this.state = {
           loading: false,
           things: [],
        };
    }

    componentDidMount() {
        getThings().then(
            (things) => this.setState({loading: false, things}));
        this.setState({loading: true});
    }

    render() {
        const { loading, things } = this.state;
        return (
            <div>
                Hello World!
                loading: {String(loading)},
                things: {things.join(', ')}
            </div>
        );
    }
}

ReactDOM.render(
    <App />,
    document.getElementById('root') as HTMLElement
);

oneshot-redux.tsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { connect, Provider } from 'react-redux';
import { applyMiddleware, createStore, compose, Dispatch } from 'redux';
import thunk from 'redux-thunk';

const getThings = (): Promise<Array<string>> => new Promise((resolve) => {
    setTimeout(() => resolve(['a', 'b', 'c']), 500);
});

// actions.ts
interface ActionLoad {
    type: 'loading';
}
interface ActionLoaded {
    type: 'loaded';
    things: Array<string>;
}

type Action = ActionLoad | ActionLoaded;

const loadThings = () => {
    return (dispatch: Dispatch<Action>) => {
        dispatch({ type: 'loading' });
        getThings().then((things) => {
            dispatch({ type: 'loaded', things });
        });
    };
}

// reducer.ts
interface AppState {
    loading: boolean;
    things: Array<string>;
}

const defaultState: AppState = {
    loading: false,
    things: [],
};

const appReducer = (state: AppState = defaultState, action: Action) => {
    if (action.type === 'loading') {
        return {...state, loading: true};
    }
    if (action.type === 'loaded') {
        return {...state, loading: false, things: action.things};
    }
    return state;
};

// store.ts
const store = createStore(
    appReducer,
    applyMiddleware(thunk)
);

// app.tsx
interface AppDispatch {
    loadThings: () => void;
}

class PureApp extends React.Component<AppState & AppDispatch, {}> {
    componentDidMount() {
        this.props.loadThings();
    }

    render() {
        const { loading, things } = this.props;
        return (
            <div>
                Hello World!
                loading: {String(loading)},
                things: {things.join(', ')}
            </div>
        );
    }
}

const App = connect<AppState, AppDispatch>(
    (x: AppState) => x,
    {loadThings}
)(PureApp);

// index.tsx
ReactDOM.render(
  <Provider store={store}>
      <App />
  </Provider>,
  document.getElementById('root') as HTMLElement
);