frontend_validation.pdf

Transcript

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

   View Slide

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

   View Slide

3. Demo
   

   View Slide

4. redux flow
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

11. actionΛఆٛ
    

    View Slide

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

    View Slide

13. reducerΛఆٛ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

17. ൑ఆϩδοΫ
    

    View Slide

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

    View Slide

19. middlewareͷ࣮૷
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

24. middlewareͷܕ
    

    View Slide

25. 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
    }
    => ؔ਺Λฦؔ͢਺Λฦؔ͢਺
    => ܹ͍͠ΧϦʔԽ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

29. 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;
    

    View Slide

30. όϦσʔγϣϯؔ਺
    (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 })); // ࣦഊ࣌
    + }
    + };
    

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

34. Complete!
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

38. Thank you!
    

    View Slide