Angular使いが Reactでアプリ組んだらこうなった React勉強会@福岡 vol.2

Noriyuki Shinpuku ng-fukuoka organizer VEGA corporation Co., Ltd. @puku0x

Angular

Supported by Google

Full-fledged & opinionated Angular Protractor Forms PWA Augury Language Services Router Elements CDK Universal Karma Labs Compiler i18n Http Material Animations CLI

React

Supported by Facebook

React is a library

Scalable apps with React?

1. Use TypeScript $ npm i -D @types/{react,react-dom}

2. Abstraction ● Keep components SIMPLE ● Better testability Component Service HttpClient Axios

HttpClient (inspired by Angular’s HttpClient) export abstract class HttpClient { abstract get(url: string, options?: HttpRequestOptions) abstract post(url: string, data?: unknown, options?: HttpRequestOptions) abstract put(url: string, data?: unknown, options?: HttpRequestOptions) abstract delete(url: string, options?: HttpRequestOptions) }

Services const fetchUser = async (id: number) => { const res = await httpClient.get(`/users/${id}`); return res.data; }; export const UserService = { fetch: fetchUser, ... };

3. Separation of concerns ● Business logic ● State management ● Components

State management ● react-redux + redux-thunk + re-ducks pattern ● Keep reducers PURE ● Good practices from NgRx ○ Good Action Hygiene ○ Entity pattern

Good Action Hygiene export enum UserActionTypes { // ACTION_NAME = '[Source] Event', FETCH_REQUEST = '[User/Page] Fetch Request', FETCH_SUCCESS = '[User/API] Fetch Success', FETCH_FAILURE = '[User/API] Fetch Failure', ... } Good Action Hygiene with NgRx Mike Ryan https://www.youtube.com/watch?v=JmnsEvoy-gY

Thunk Actions export interface FetchUserRequest extends Action { payload: { id: number }; } export function fetchUserRequest(id: number): ThunkAction, State, undefined, Actions> { return async dispatch => { dispatch({ type: UserActionTypes.FETCH_REQUEST, payload: { id } }); const result = await UserService.fetch(id) .then(response => fetchUserSuccess(response)) .catch(error => fetchUserFailure(error)); return dispatch(result); }; }

Entity pattern interface Dictionary { [id: number]: T; } export interface EntityState { ids: number[]; entities: Dictionary; }

EntityAdapter (inspired by NgRx’s EntityAdapter) export const adapter: EntityAdapter = createEntityAdapter(); export function reducer(state = initialState, action: Action): State { switch (action.type) { ... case UserActionTypes.UPDATE_SUCCESS: { const { user } = action.payload; return adapter.update(user, { ...state, isFetching: false }); } ... } } Immutable operation with less boilerplates

Selectors const usersStateSelector = (state: { users: UserState }) => state.users; const { selectAll, selectEntities } = adapter.getSelectors(); export const usersSelector = createSelector( usersStateSelector, selectAll );

3. Separation of concerns (for components) ● Business logic ● State management ● Components ○ Page components ○ Container components ○ Presentational components

Structure of components Page component Router params Store Container components Presentational components http://localhost:3000/users/:id

Page components type Props = RouteComponentProps<{ id: string }>; const UserDetailPage: FunctionComponent = props => { const { match, location } = props; const { id } = match.params; const params = new URLSearchParams(location.search); const edit = params.get('edit') || false; return ; }; export default withRouter(UserDetailPage);

Container components type Props = { id: number; }; export const UserDetail: FunctionComponent = props => { const { id } = props; const user = useSelector(userSelector); const dispatch = useDispatch(); useEffect(() => dispatch(fetchUserRequest(id)), [id]); return ; };

Presentational components type Props = RouteComponentProps & { user: User; }; const UserDetailComponent: FunctionComponent = props => { const { user, history } = props; const goBack = useCallback(() => history.goBack(), []); return <>...> }; export const UserDetail = withRouter(UserDetailComponent);

4. Lazy loading ● Suspense + lazy() ● Route-based lazy loading import { lazy } from 'react'; export const UsersPage = lazy(() => import('./UsersPage'));

Routing separation Loading...}> } /> “Separation of concerns” for routing

Routing separation for child pages const UsersPage: FunctionComponent = () => ( Loading...}> ); export default UsersPage;

src/ models/ user.model.ts index.ts pages/ UsersPage/ UserDetailPage/ components/ containers/ UserDetailPage.tsx index.ts UsersPage.tsx index.ts MainPage/ index.ts 5. Naming & structuring like way shared/ components/ Button/ Button.tsx Button.test.tsx Button.stories.tsx index.ts helpers/ hooks/ index.ts : App.tsx AuthenticatedRoute.tsx index.tsx index.html services/ user/ user.service.ts user.service.test.ts index.ts store/ user/ actions/ user.action.ts user.action.test.ts index.ts reducers/ selectors/ states/ index.ts https://angular.io/guide/styleguide

Other libraries?

Styling ● emotion ● classnames

Form validation ● Formik (v1.5) ○ v2.0.1-rc.x is not recommended https://github.com/jaredpalmer/formik/pull/1570 ● Yup

Routing ● react-router (v5.0) ● connected-react-router const middleware = process.env.NODE_ENV !== 'production' ? [require('connected-react-router/immutable').routerMiddleware(history), thunk] : [require('connected-react-router').routerMiddleware(history), thunk]; const middlewares = applyMiddleware(...middleware);

State management ● react-redux (v7.1) ○ Requires adding custom @types/react-redux ● redux-thunk ○ Requires overloading redux’s Dispatch https://github.com/reduxjs/redux-thunk/pull/247 ● reselect

Testing ● jest ● enzyme ● react-test-renderer ● redux-mock-store

Follow good practices

One more option

We don’t use create-react-app Because it doesn’t allow us to use path alias.

How was it?

Awesome!

● Type safe ● Simple ● Easy to refactor ● Performant ● Scalable

Summary ● The experience of helped us to make app ○ Using TypeScript ○ Abstraction ○ Separation of concerns ○ Lazy loading ○ Naming

Always keep an open mind

Thank you! @puku0x Noriyuki Shinpuku