Add global application store

[controversial]

Implements a system by which any component can access and mutate a shared global application store as follows:

import { useStore } from './store';
...
function Component: React.FC () {
  const { state, dispatch } = useStore();
  ...
}

Global state and actions are defined centrally in a store.ts file.

Closes #70

[duci9y]

@controversial Travis passed this but the build on Heroku failed because of prettier. Could you look into it? We want Travis to fail first, and then fix the prettier stuff.

[controversial]

@duci9y This branch was made off of the master branch before the prettier v2 updates were on master, so that's probably the issue. I'll resolve now.

[duci9y]

@duci9y This branch was made off of the master branch before the prettier v2 updates were on master, so that's probably the issue. I'll resolve now.

Yeah but shouldn't Travis still have caught it before a deploy was pushed to Heroku?

[controversial]

I see what you mean.

Looks like the issue is with the command defined for yarn run eslint: https://github.com/JumboCode/TUTV/blob/8c9ea8adc6138b57e8be6a0ee398bf18b287ef1d/package.json#L80 The glob in this command only captures files with a .tsx extension, omitting typescript files without JSX, such as the store.ts file I added in this PR. I’ll make an issue and a PR to address this.

[controversial]

I don't think it's worth making separate contexts. I'm not sure whether or not a component that uses

const { dispatch } = useStore();

would re-render on state changes, but if it does, I don't think it's a big deal; I'm quite sure it won't make a meaningful performance difference since we won't be doing tons of rapid updates to the global store. Components that depend on dispatching actions but don't depend on global state will be extremely rare anyway, since often the question of which action to dispatch will depend on current state

For normal usage, any component in the tree that depends on global state can just directly use the useStore hook itself. You would only want to decouple a component from the global store if, for example, you wanted a component to display a range of different data that is only data from the global store in some cases. In cases when you would normally use props, it's fine to pass pieces of the global store as props, but I think in most other cases there's no reason not to connect a component directly to the store