Redux middleware Ͱ ϑϩϯτΤϯυόϦσʔγϣϯ Λ࣮૷͢Δ @kato1628

@kato1628 ɾReact, Redux, TypeScript ɾSudachi ɾSwimming

Demo

redux flow

redux flow ʮͲ͏มߋ͞ΕΔ͔ʯˡ ʮͲ͏ৼΔ෣͏͔ʯˡ ʮͲ͏ݟ͑Δ͔ʯˡ

ͲͷϨΠϠʔ΋Ԛͨ͘͠ͳ͍

redux flow (with validation middleware) ಛఆͷBDUJPO͕EJTQBUDI͞Εͨ৔߹ʹͷΈɺ WBMJEBUJPOΛ࣮ߦ͢Δɻ FSSPSTUBUF

Motivation • Fat component/container ͷճආ • ಠཱͨ͠ػߏͰ࣮૷ ≒ ੹຿ͷ෼཭ • ֎෦ϥΠϒϥϦ΁ͷґଘճආ • Ұͭͷػߏʹ validation Λू໿

state ͷఆٛ // ͜ΜͳΤϥʔϝοηʔδΛ state ʹ͍࣋ͪͨ errors = { email: "Email is required" … }

ΤϥʔϝοηʔδͷܕΛఆٛ # src/reducers/errors.tsx + type ValidateStates = "email"; + type ErrorMessage = string; + type Errors = { [key in ValidateStates]?: ErrorMessage }

actionΛఆٛ

actionΛఆٛ # src/actions/actions.tsx + export const validationSuccess = (key: ValidateStates) => ({ + type: AppActionTypes.VALIDATION_SUCCESS as const, + key + }); + export const validationFailure = (errors: Errors) => ({ + type: AppActionTypes.VALIDATION_FAILURE as const, + errors + });

reducerΛఆٛ

reducerΛఆٛ # src/reducers/errors.tsx export const errors = (state = initialErrors, action: AppAction): Errors => { switch (action.type) { + case AppActionTypes.VALIDATION_FAILURE: // ࣦഊ࣌ + return { + ...state, + ...action.errors + }; + case AppActionTypes.VALIDATION_SUCCESS: // ੒ޭ࣌ + const nextState = { ...state }; + delete nextState[action.key]; + return nextState; default: return state; }

✓ state (ͲΜͳ஋͔) ✓ action (Կ͕ى͜Δ͔) ✓ reducer (Ͳ͏มߋ͞ΕΔ͔) ☐ validation middleware (Ͳ͏൑ఆ͢Δ͔)

validation middleware ͷ੹຿ ☑ ൑ఆϩδοΫ => ඞਢνΣοΫɺܻ਺νΣοΫɺ൒֯਺ࣈνΣοΫ…etc ☑ ൑ఆ݁Ռͷ൓ө => action ͷ dispatch

൑ఆϩδοΫ

validator • จࣈྻόϦσʔγϣϯ • ๛෋ͳόϦσʔγϣϯϝιου https://github.com/validatorjs/validator.js $ yarn add validator @types/validator # Example var validator = require('validator'); validator.isEmail('[email protected]'); //=> true

middlewareͷ࣮૷

What is middleware? • redux ͷ dispatch Λ֦ு͢Δػߏ • ϐϡΞͳ dispatch ͸ϓϨʔϯͳΦϒδΣΫτ͔͠ड͚ औΕͳ͍ • Ex redux-thunk

dispatch ʮSFEVDFSʹBDUJPOΛ౉ͯ͠TUBUFΛߋ৽͢Δʯˡ

Ex. redux-thunk ແ͠ // action ͸ϓϨʔϯͳΦϒδΣΫτΛฦ͢ const increment = () => { return { type: INCREMENT_COUNTER, }; } // dispatch ͸ϓϨʔϯͳΦϒδΣΫτͷΈड͚औΕΔ dispatch(increment())

Ex. redux-thunk ༗Γ // function Λฦ͢ action Λఆٛ const incrementAsync = () => { return (dispatch) => { setTimeout(() => { // Yay! Can invoke sync or async actions with `dispatch` dispatch(increment()); // ͦͷதͰ͞Βʹ action Λ dispatch }, 1000); }; } // dispatch ͸ function ΋ड͚औΕΔ dispatch(incrementAsync())

middlewareͷܕ

middlewareͷܕ # src/node_modules/redux/index.d.ts export interface Middleware< DispatchExt = {}, S = any, D extends Dispatch = Dispatch > { (api: MiddlewareAPI): ( next: Dispatch ) => (action: any) => any } => ؔ਺Λฦؔ͢਺Λฦؔ͢਺ => ܹ͍͠ΧϦʔԽ

ͪΐͬͱ ԿݴͬͯΔ͔Θ͔Βͳ͍

middlewareͷجຊܗ const validator = ({ dispatch, getState }) => next => action => { // ͜͜ʹ൑ఆϩδοΫͱɺaction dispatch Λ࣮૷ // ࣍ͷ middleware ·ͨ͸ store ͷ dispatch ͕ݺͼग़͞ΕΔ return next(action); };

middlewareͷجຊܗ (ܕ༗Γ) + const validator = ({ dispatch, getState }: MiddlewareAPI) => ( + next: Dispatch + ) => (action: AppAction) => { + return next(action); + }; + + export default validator;

middlewareͷ࣮૷ const validator = ({ dispatch, getState }: MiddlewareAPI) => ( next: Dispatch ) => (action: AppAction) => { + switch (action.type) { + case AppActionTypes.UPDATE_EMAIL: // dispatchʹόϦσʔγϣϯؔ਺Λ౉͢ʢredux-thunk Λ࢖༻ʣ + dispatch(validateEmail(action.email)); + break; + default: + break; } return next(action); }; export default validator;

όϦσʔγϣϯؔ਺ (thunk actin) + const validateEmail = (email: string): AppThunkAction => dispatch => { + let errorMessage: string = ""; // validator Λ࢖ͬͯඞਢνΣοΫ + if (isEmpty(email)) { + errorMessage = "Email is required."; + } + if (errorMessage === "") { + dispatch(validationSuccess(“email")); // ੒ޭ࣌ + } else { + dispatch(validationFailure({ email: errorMessage })); // ࣦഊ࣌ + } + };

validation middleware • ൑ఆϩδοΫΛ࣮ߦ • ੒ޭɾࣦഊͦΕͧΕͷ action Λ dispatch • validationSuccess • validationFailure

# src/index.tsx + import thunk from “redux-thunk"; + import validator from "./middleware/validator"; - const store = createStore(reducer) + const store = createStore(reducer, applyMiddleware(thunk, validator)); applyMiddleware

# src/containers/AppContainer.tsx + const mapStateToProps = (state: AppState) => ({ + errors: state.errors + }); # src/components/App.tsx + const App: React.FC = ({ errors, onChangeEmail }) => { ~~ +

{errors.email}

display errors

Complete!

Pros • Fat component/container ͷճආ • ಠཱͨ͠ػߏͰ࣮૷ ≒ ੹຿ͷ෼཭ • ֎෦ϥΠϒϥϦ΁ͷґଘճආ • Ұͭͷػߏʹ validation Λू໿

Cons • Component ͔Βԕ͍ॴʹ validation ͕࣮ ૷͞ΕΔ • middleware Λ஌Βͳ͍ͱཧղ͕೉͍͠

Source https://github.com/kato1628/frontend-validation

Thank you!