frontend_validation.pdf

Transcript

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

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

3. Demo

4. redux flow

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

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

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

8. Motivation • Fat component/container ͷճආ • ಠཱͨ͠ػߏͰ࣮૷ ≒ ੹຿ͷ෼཭ •

   ֎෦ϥΠϒϥϦ΁ͷґଘճආ • Ұͭͷػߏʹ validation Λू໿

9. state ͷఆٛ // ͜ΜͳΤϥʔϝοηʔδΛ state ʹ͍࣋ͪͨ errors = { email:

   "Email is required" … }

10. ΤϥʔϝοηʔδͷܕΛఆٛ # src/reducers/errors.tsx + type ValidateStates = "email"; + type

    ErrorMessage = string; + type Errors = { [key in ValidateStates]?: ErrorMessage }

11. actionΛఆٛ

12. 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 + });

13. reducerΛఆٛ

14. 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; }

15. ✓ state (ͲΜͳ஋͔) ✓ action (Կ͕ى͜Δ͔) ✓ reducer (Ͳ͏มߋ͞ΕΔ͔) ☐

    validation middleware (Ͳ͏൑ఆ͢Δ͔)

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

    action ͷ dispatch

17. ൑ఆϩδοΫ

18. validator • จࣈྻόϦσʔγϣϯ • ๛෋ͳόϦσʔγϣϯϝιου https://github.com/validatorjs/validator.js $ yarn add validator

    @types/validator # Example var validator = require('validator'); validator.isEmail('foo@bar.com'); //=> true

19. middlewareͷ࣮૷

20. What is middleware? • redux ͷ dispatch Λ֦ு͢Δػߏ • ϐϡΞͳ

    dispatch ͸ϓϨʔϯͳΦϒδΣΫτ͔͠ड͚ औΕͳ͍ • Ex redux-thunk

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

22. Ex. redux-thunk ແ͠ // action ͸ϓϨʔϯͳΦϒδΣΫτΛฦ͢ const increment = ()

    => { return { type: INCREMENT_COUNTER, }; } // dispatch ͸ϓϨʔϯͳΦϒδΣΫτͷΈड͚औΕΔ dispatch(increment())

23. 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())

24. middlewareͷܕ

25. middlewareͷܕ # src/node_modules/redux/index.d.ts export interface Middleware< DispatchExt = {}, S

    = any, D extends Dispatch = Dispatch > { (api: MiddlewareAPI<D, S>): ( next: Dispatch<AnyAction> ) => (action: any) => any } => ؔ਺Λฦؔ͢਺Λฦؔ͢਺ => ܹ͍͠ΧϦʔԽ

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

27. middlewareͷجຊܗ const validator = ({ dispatch, getState }) => next

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

28. middlewareͷجຊܗ (ܕ༗Γ) + const validator = ({ dispatch, getState }:

    MiddlewareAPI<AppThunkDispatch>) => ( + next: Dispatch + ) => (action: AppAction) => { + return next(action); + }; + + export default validator;

29. middlewareͷ࣮૷ const validator = ({ dispatch, getState }: MiddlewareAPI<AppThunkDispatch>) =>

    ( 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;

30. όϦσʔγϣϯؔ਺ (thunk actin) + const validateEmail = (email: string): AppThunkAction<void>

    => dispatch => { + let errorMessage: string = ""; // validator Λ࢖ͬͯඞਢνΣοΫ + if (isEmpty(email)) { + errorMessage = "Email is required."; + } + if (errorMessage === "") { + dispatch(validationSuccess(“email")); // ੒ޭ࣌ + } else { + dispatch(validationFailure({ email: errorMessage })); // ࣦഊ࣌ + } + };

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

    validationSuccess • validationFailure

32. # 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

33. # src/containers/AppContainer.tsx + const mapStateToProps = (state: AppState) => ({

    + errors: state.errors + }); # src/components/App.tsx + const App: React.FC<AppProps> = ({ errors, onChangeEmail }) => { ~~ + <p>{errors.email}</p> display errors

34. Complete!

35. Pros • Fat component/container ͷճආ • ಠཱͨ͠ػߏͰ࣮૷ ≒ ੹຿ͷ෼཭ •

    ֎෦ϥΠϒϥϦ΁ͷґଘճආ • Ұͭͷػߏʹ validation Λू໿

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

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

38. Thank you!