![Type
export type CoordinatorState<T extends string = string> = {
name: string;
currentStack: T;
stacks: Record<T, PageState[]>;
};
type PageState = {
states: Record<string, any>;
coordinators: Record<string, CoordinatorState>;
} & Page;
type Page =
| { type: "reception" }
| { type: "sessionDetail"; sessionUuid: string }
| { type: "patientDetail"; patientUuid: string }
| { type: "settingIndex" };
// ...](https://image.slidesharecdn.com/presentation-220915072529-82d8b9a2/85/-17-320.jpg)
![Example
{
name: "ROOT",
currentStack: "reception",
stacks: {
reception: [
{
type: "reception",
states: {
sessionListTab: "all",
},
coordinators: {},
},
],
patients: [
{
type: "patientIndex",
states: {},
coordinators: {},
},
],
settings: [
{
type: "settingIndex",
states: {},
coordinators: {},
},
],
},
};](https://image.slidesharecdn.com/presentation-220915072529-82d8b9a2/85/-21-320.jpg)
![CoordinatorState から画面を表示
CoordinatorContext のselectorやmutation用の関数などを定義する useCoordinator
export const useCoordinator = () => {
const context = useContext(CoordinatorContext);
if (!context) {
throw new Error("Context is not initialized yet.");
}
const { coordinator, setCoordinator } = context;
const currentPage = useMemo(() => getCurrentPage(coordinator), [coordinator]);
// ...
return { ...context, currentPage };
};
const getCurrentPage = (coordinator: CoordinatorState): PageState => {
// coordinatorStateのcurrentStackの配列の最後のページを取得する
return last(coordinator.stacks[coordinator.currentStack]);
};](https://image.slidesharecdn.com/presentation-220915072529-82d8b9a2/85/-23-320.jpg)
![RootCoordinatorProvider に初期化する処理を行う
export const RootCoordinatorProvider: React.FC = ({ children }) => {
const [coordinator, setCoordinator] = useState(routerInitialState);
useEffect(() => {
const path = window.location.pathname;
// `/reception` だったら
// { type: "reception",
// states: {},
// coordinators: {} }
const pageState = pathToPageState(path);
if (pageState) {
setCoordinator((c) => {
const newCoordinator = // pageStateを使って、ゴニョゴニョ
return newCoordinator;
});
}
}, []);
return (
<CoordinatorContext.Provider value={{ coordinator, setCoordinator }}>{children}</CoordinatorContext.Provider>
);
};
pathToPageState はURLPatternAPIを用いてる
https://developer.mozilla.org/en-US/docs/Web/API/URL_Pattern_API](https://image.slidesharecdn.com/presentation-220915072529-82d8b9a2/85/-27-320.jpg)
![export const useCoordinator = () => {
// ...
const push = useCallback(
(page: Page) => {
const newCoordinator = produce(coordinator, (c) => {
c.stacks[c.currentStack].push({
...page,
coordinators: {},
states: {},
});
});
setCoordinator(newCoordinator);
},
[setCoordinator, coordinator]
);
const openPage = useCallback(
(page: Page, e?: React.MouseEvent) => {
push(page);
},
[push]
);
return { ...context, currentPage, openPage };
};](https://image.slidesharecdn.com/presentation-220915072529-82d8b9a2/85/-29-320.jpg)
![export const RootCoordinatorProvider: React.FC = ({ children }) => {
//...
useEffect(() => {
window.history.replaceState(coordinator, "");
}, [coordinator]);
useEffect(() => {
window.addEventListener("popstate", (e) => {
if (!e.state) {
return;
}
setCoordinator(e.state);
});
}, [setCoordinator]);
//...
};
coordinator が変更されたら、 history.replaceState で新しい状態に置き換える
popState のイベントが発行されてたら e.state から coordinator を取得してセット](https://image.slidesharecdn.com/presentation-220915072529-82d8b9a2/85/-31-320.jpg)
![親のContextから現在のページのcoordinatorを返す
export const CoordinatorProvider: React.FC = ({
children,
coordinator: initialCoordinator,
}) => {
const parentCoordinator = useCoordinator();
const coordinator: CoordinatorState | null = useMemo(() => {
const name = initialCoordinator.name;
const page = getCurrentPage(parentCoordinator.coordinator);
if (page && page.coordinators[name]) {
return page.coordinators[name];
}
return initialCoordinator;
}, [parentCoordinator.coordinator]);
//...
return (
<CoordinatorContext.Provider value={{ coordinator, setCoordinator }}>
{children}
</CoordinatorContext.Provider>
);
};](https://image.slidesharecdn.com/presentation-220915072529-82d8b9a2/85/-34-320.jpg)
![親のContextを変更する
export const CoordinatorProvider: React.FC<{
coordinator: CoordinatorState;
}> = ({ children, coordinator: initialCoordinator }) => {
const parentCoordinator = useCoordinator();
// ...
const setCoordinator = useCallback(
(coordinator: CoordinatorState) => {
const newCoordinator = produce(parentCoordinator.coordinator, (draft) => {
draft.stacks[draft.currentStack][
draft.stacks[draft.currentStack].length - 1
].coordinators = { [name]: coordinator };
});
parentCoordinator.setCoordinator(newCoordinator);
},
[parentCoordinator]
);
return (
<CoordinatorContext.Provider value={{ coordinator, setCoordinator }}>
{children}
</CoordinatorContext.Provider>
);
};](https://image.slidesharecdn.com/presentation-220915072529-82d8b9a2/85/-35-320.jpg)
![ページでの使用例
const SettingIndexPage: React.FC<{}> = () => {
const initialCoordinator: CoordinatorState = {
name: "SETTINGS",
currentStack: "editorTemplate",
stacks: {
editorTemplate: [
{
type: "editorTemplateIndex",
states: {},
coordinators: {},
},
],
nonHealthcareSystemAction: [
{
type: "nonHealthcareSystemActionIndex",
states: {},
coordinators: {},
},
],
},
};
return (
<Coordinator coordinator={initialCoordinator}>
<SettingsTabNav />
<CurrentPage />
</Coordinator>
);
};](https://image.slidesharecdn.com/presentation-220915072529-82d8b9a2/85/-37-320.jpg)
![各Pageに states を用意しており、そこに必要な情報を保存が可能。
{
name: "ROOT",
currentStack: "reception",
stacks: {
reception: [
{
type: "reception",
states: {
sessionListTab: "all", // <-- ここ！
},
coordinators: {},
},
],
patients: [
{
type: "patientIndex",
states: {},
coordinators: {},
},
],
settings: [
{
type: "settingIndex",
states: {},
coordinators: {},
},
],
},
};](https://image.slidesharecdn.com/presentation-220915072529-82d8b9a2/85/-39-320.jpg)
![export function useStates<T>(id: string, defaultValue: T) {
const { currentPage, setCoordinator, coordinator } = useCoordinator();
const state: T = useMemo(() => {
return currentPage?.states[id] ?? defaultValue;
}, [currentPage, id, defaultValue]);
const setState = useCallback((newState: T) => {
const newCoordinator = produce(coordinator, (draft) => {
const currentPage = last(draft.stacks[draft.currentStack]);
currentPage.states = { ...currentPage.states, [id]: newState };
});
setCoordinator(newCoordinator);
}, []);
return { state, setState };
}](https://image.slidesharecdn.com/presentation-220915072529-82d8b9a2/85/-41-320.jpg)
More Related Content
Similar to ルーター自前実装の话 (20)
ルーター自前実装の话
- 1. ルーター自前実装のお话
- 11. DEMO
- 12. ルーターライブラリ react-router / reach-router (普通のwebrouter) queryparameter?parse? react-navigation react-native用のライブラリ 実現したい挙動は近いが、reactnativeforwebを利用する必要がある。 https://reactnavigation.org/docs/web-support/ react-stack-nav https://github.com/tuckerconnelly/react-stack-nav ネストしたタブがサポートされてない 運用されてない
- 13. 自前で実装する
- 16. Context interface CoordinatorContextState { coordinator: CoordinatorState; setCoordinator: (coordinator: CoordinatorState) => void; } const CoordinatorContext = createContext<CoordinatorContextState | null>(null);
- 17. Type export type CoordinatorState<T extends string = string> = { name: string; currentStack: T; stacks: Record<T, PageState[]>; }; type PageState = { states: Record<string, any>; coordinators: Record<string, CoordinatorState>; } & Page; type Page = | { type: "reception" } | { type: "sessionDetail"; sessionUuid: string } | { type: "patientDetail"; patientUuid: string } | { type: "settingIndex" }; // ...
- 18. Type
- 19. Type
- 20. Type
- 21. Example { name: "ROOT", currentStack: "reception", stacks: { reception: [ { type: "reception", states: { sessionListTab: "all", }, coordinators: {}, }, ], patients: [ { type: "patientIndex", states: {}, coordinators: {}, }, ], settings: [ { type: "settingIndex", states: {}, coordinators: {}, }, ], }, };
- 23. CoordinatorState から画面を表示 CoordinatorContext のselectorやmutation用の関数などを定義する useCoordinator export const useCoordinator = () => { const context = useContext(CoordinatorContext); if (!context) { throw new Error("Context is not initialized yet."); } const { coordinator, setCoordinator } = context; const currentPage = useMemo(() => getCurrentPage(coordinator), [coordinator]); // ... return { ...context, currentPage }; }; const getCurrentPage = (coordinator: CoordinatorState): PageState => { // coordinatorStateのcurrentStackの配列の最後のページを取得する return last(coordinator.stacks[coordinator.currentStack]); };
- 24. CoordinatorState から画面を表示 currentPage から場合分けでページを表示をする const CurrentPage: React.FC = () => { const { currentPage } = useCoordinator(); if (!currentPage) return <NotFound />; switch (currentPage.type) { case "reception": return <ReceptionPage />; case "sessionDetail": return <SessionDetailPage uuid={currentPage.sessionUuid} />; case "patientIndex": return <PatientIndex />; case "settingIndex": return <SettingIndexPage />; case "editorTemplateDetail": return <EditorTemplateDetailPage uuid={currentPage.editorTemplateUuid} />; //... } return null; };
- 25. CoordinatorState から画面を表示 function App() { return ( <RootCoordinatorProvider> <CurrentPage /> </RootCoordinatorProvider> ); }
- 26. URLからCoordinatorState を初期化する ルーターなのでURLから期待する CoordinatorState を初期化する必要がある。
- 27. RootCoordinatorProvider に初期化する処理を行う export const RootCoordinatorProvider: React.FC = ({ children }) => { const [coordinator, setCoordinator] = useState(routerInitialState); useEffect(() => { const path = window.location.pathname; // `/reception` だったら // { type: "reception", // states: {}, // coordinators: {} } const pageState = pathToPageState(path); if (pageState) { setCoordinator((c) => { const newCoordinator = // pageStateを使って、ゴニョゴニョ return newCoordinator; }); } }, []); return ( <CoordinatorContext.Provider value={{ coordinator, setCoordinator }}>{children}</CoordinatorContext.Provider> ); }; pathToPageState はURLPatternAPIを用いてる https://developer.mozilla.org/en-US/docs/Web/API/URL_Pattern_API
- 29. export const useCoordinator = () => { // ... const push = useCallback( (page: Page) => { const newCoordinator = produce(coordinator, (c) => { c.stacks[c.currentStack].push({ ...page, coordinators: {}, states: {}, }); }); setCoordinator(newCoordinator); }, [setCoordinator, coordinator] ); const openPage = useCallback( (page: Page, e?: React.MouseEvent) => { push(page); }, [push] ); return { ...context, currentPage, openPage }; };
- 31. export const RootCoordinatorProvider: React.FC = ({ children }) => { //... useEffect(() => { window.history.replaceState(coordinator, ""); }, [coordinator]); useEffect(() => { window.addEventListener("popstate", (e) => { if (!e.state) { return; } setCoordinator(e.state); }); }, [setCoordinator]); //... }; coordinator が変更されたら、 history.replaceState で新しい状態に置き換える popState のイベントが発行されてたら e.state から coordinator を取得してセット
- 33. 使ってる Context の型はRootで利用してるものと一緒なので 同様に coordinator と setCoordinator を用意する必要がある。 export const CoordinatorProvider: React.FC<{ coordinator: CoordinatorState; }> = ({ children, coordinator: initialCoordinator }) => { //... return ( <CoordinatorContext.Provider value={{ coordinator, setCoordinator }}> {children} </CoordinatorContext.Provider> ); };
- 34. 親のContextから現在のページのcoordinatorを返す export const CoordinatorProvider: React.FC = ({ children, coordinator: initialCoordinator, }) => { const parentCoordinator = useCoordinator(); const coordinator: CoordinatorState | null = useMemo(() => { const name = initialCoordinator.name; const page = getCurrentPage(parentCoordinator.coordinator); if (page && page.coordinators[name]) { return page.coordinators[name]; } return initialCoordinator; }, [parentCoordinator.coordinator]); //... return ( <CoordinatorContext.Provider value={{ coordinator, setCoordinator }}> {children} </CoordinatorContext.Provider> ); };
- 35. 親のContextを変更する export const CoordinatorProvider: React.FC<{ coordinator: CoordinatorState; }> = ({ children, coordinator: initialCoordinator }) => { const parentCoordinator = useCoordinator(); // ... const setCoordinator = useCallback( (coordinator: CoordinatorState) => { const newCoordinator = produce(parentCoordinator.coordinator, (draft) => { draft.stacks[draft.currentStack][ draft.stacks[draft.currentStack].length - 1 ].coordinators = { [name]: coordinator }; }); parentCoordinator.setCoordinator(newCoordinator); }, [parentCoordinator] ); return ( <CoordinatorContext.Provider value={{ coordinator, setCoordinator }}> {children} </CoordinatorContext.Provider> ); };
- 36. Context をネストすることにより 子CoordinatorProvider の下で useCoordinator を使えば、同じ関数でも 子の CoordinatorState でのページ遷移が実現する
- 37. ページでの使用例 const SettingIndexPage: React.FC<{}> = () => { const initialCoordinator: CoordinatorState = { name: "SETTINGS", currentStack: "editorTemplate", stacks: { editorTemplate: [ { type: "editorTemplateIndex", states: {}, coordinators: {}, }, ], nonHealthcareSystemAction: [ { type: "nonHealthcareSystemActionIndex", states: {}, coordinators: {}, }, ], }, }; return ( <Coordinator coordinator={initialCoordinator}> <SettingsTabNav /> <CurrentPage /> </Coordinator> ); };
- 39. 各Pageに states を用意しており、そこに必要な情報を保存が可能。 { name: "ROOT", currentStack: "reception", stacks: { reception: [ { type: "reception", states: { sessionListTab: "all", // <-- ここ！ }, coordinators: {}, }, ], patients: [ { type: "patientIndex", states: {}, coordinators: {}, }, ], settings: [ { type: "settingIndex", states: {}, coordinators: {}, }, ], }, };
- 40. 選択されたリストタブをPageState に保存し参照する const ReceptionPage: React.FC<{}> = () => { const { state, setState } = useStates<SessionListTab>( "sessionListTab", "all" ); return ( <Page name="Reception | 受付"> <Tabs index={tabToIndex(state)} onChange={(i) => setState(indexToTab(i))}> <TabList> <Tab>すべて</Tab> <Tab>診察まち</Tab> <Tab>検査まち</Tab> </TabList> <TabPanels> <TabPanel>すべて</TabPanel> <TabPanel>診察まち</TabPanel> <TabPanel>検査まち</TabPanel> </TabPanels> </Tabs> </Page> ); };
- 41. export function useStates<T>(id: string, defaultValue: T) { const { currentPage, setCoordinator, coordinator } = useCoordinator(); const state: T = useMemo(() => { return currentPage?.states[id] ?? defaultValue; }, [currentPage, id, defaultValue]); const setState = useCallback((newState: T) => { const newCoordinator = produce(coordinator, (draft) => { const currentPage = last(draft.stacks[draft.currentStack]); currentPage.states = { ...currentPage.states, [id]: newState }; }); setCoordinator(newCoordinator); }, []); return { state, setState }; }
- 43. Thanks