Magic Login: Control flow state with redux instead of separate routes

[jblz]

This PR moves to redux actions to control state & converges on the /login route (instead of /login/send-me-a-link, for example).

Manual Testing

• Apply server-side changes (see: D5031-code)
• Visit the login page
• Click the Email me a login link link
• Follow the flow

Automated Testing

npm run test-client -- --grep "state login"

For item Initiate state changes via Redux actions in #12677

TODOs (in follow up PR(s))

• "reduxify" auth handler components (+ tests)
• component / rendering tests

[matticbot]

Test live: https://calypso.live/?branch=add/magic-login-redux

[jonathansadowski]

👍 tests pass and make sense. I also manually tested by applying D5031-code and everything works as expected. Good job!

[mcsf]

Sorry I wasn't around in time for pre-merge review, but here are my comments.

[mcsf]

Instead of manually wrapping functions with dispatch, I recommend defining mapDispatch as an object:

{
  onClickEnterPasswordInstead: hideRequestForm,
  …
}

It's shorter, less error-prone, and offloads mapper generation to Redux by being more declarative — allowing it to memoize if able to.

[mcsf]

You should only use mapDispatch to wrangle bindings of state, props and dispatch. The presence of event here is a code smell to me: this a function that should be defined in the component. So:

const mapDispatch = {
  showMagicLoginRequestForm
};

Then in the component class:

onMagicLoginRequestClick = ( event ) => {
  event.preventDefault();
  this.props.showMagicLoginRequestForm();
}

[mcsf]

Except for fetchRequestEmail, all action creators here should be pure functions returning objects, and not thunks dispatching said objects.

[mcsf]

This is quite a hefty set of reducers. We should chat about these.

[mcsf]

Also, if not passed a schema, createReducer will by default set handlers for {,DE}SERIALIAZE to return the reducer's initial state, meaning that for all of the above reducers we should get rid of those lines.

[mcsf]

For new development, we're deprecating state/<foo>/selectors in favor of https://github.com/Automattic/wp-calypso/blob/master/client/state/selectors/README.md. I forgot to mention this earlier.