- 「React + TypeScript: Recoil公式チュートリアルのTodoリストをつくる 01 ー atomを使った項目操作」
- 「React + TypeScript: Recoil公式チュートリアルのTodoリストをつくる 02 ー selectorによるフィルタリングと集計」
- 「React + TypeScript: Recoil公式チュートリアルのTodoリストをつくる 04 ー 状態を直接exportしないようにする」
Recoil公式チュートリアルの解説は前回で終えました。この第3回はスピンオフです。とくに動きは変えることなく、モジュールの構成とロジックを整理します。せっかくモジュール分けもしましたので、もう少し実践に近づけようという試みです。
サンプル001■React + TypeScript: Recoil tutorial example 03
ディレクトリをコンポーネントと状態で分ける
簡単な作例ながら、それなりにモジュール数も増えました。そこで、コンポーネント(components/)と状態(state/)を、つぎのようにディレクトリ分けすることにします。
-
src/components/App.tsxTodoItem.tsxTodoItemCreator.tsxTodoList.tsxTodoListFilters.tsxTodoListStats.tsx
-
src/state/filteredTodoListState.tstodoListFilterState.tstodoListState.tstodoListStatsState.ts
すると、各モジュールがimportするパスを修正しなければなりません。機械的な書き替えですので、コードを羅列します。動きが変わらず、エラーの出ないことを確かめてください。
src/index.tsx
// import App from './App';
import App from './components/App';
src/components/TodoItem.tsx
// import { todoListState } from './todoListState';
import { todoListState } from '../state/todoListState';
// import type { TodoItemType } from './todoListState';
import type { TodoItemType } from '../state/todoListState';
src/components/TodoItemCreator.tsx
// import { todoListState } from './todoListState';
import { todoListState } from '../state/todoListState';
src/components/TodoList.tsx
// import { filteredTodoListState } from './filteredTodoListState';
import { filteredTodoListState } from '../state/filteredTodoListState';
src/components/TodoListFilters.tsx
// import { todoListFilterState } from './todoListFilterState';
import { todoListFilterState } from '../state/todoListFilterState';
src/components/TodoListStats.tsx
// import { todoListStatsState } from './todoListStatsState';
import { todoListStatsState } from '../state/todoListStatsState';
フィルタ設定のロジックをコンポーネントから状態に移す
フィルタの設定はコンポーネント(TodoListFilters)から行うのでなく、状態(todoListFilterState)にカスタムフック(useFilter)として移します。コードはむしろ増えるものの、フックを介すことによりコンポーネントが直に状態を変えることはなくなるのです。そのため、コンポーネントが用いるRecoilのフックも、値を参照するだけのuseRecoilValueに差し替えました。
src/state/todoListFilterState.ts
import { useCallback } from 'react';
// import { atom } from 'recoil';
import { atom, useSetRecoilState } from 'recoil';
export const useFilter = () => {
const setFilter = useSetRecoilState(todoListFilterState);
const setListFilter = useCallback(
(filter: string) => {
setFilter(filter);
},
[setFilter]
);
return { setListFilter };
};
src/components/TodoListFilters.tsx
// import { useRecoilState } from 'recoil';
import { useRecoilValue } from 'recoil';
// import { todoListFilterState } from '../state/todoListFilterState';
import { todoListFilterState, useFilter } from '../state/todoListFilterState';
export const TodoListFilters: FC = () => {
// const [filter, setFilter] = useRecoilState(todoListFilterState);
const filter = useRecoilValue(todoListFilterState);
const { setListFilter } = useFilter();
const updateFilter: ChangeEventHandler<HTMLSelectElement> = useCallback(
({ target: { value } }) => {
// setFilter(value);
setListFilter(value);
},
// [setFilter]
[setListFilter]
);
};
Todoリストへの項目データ追加をコンポーネントから状態に移す
Todoリストに項目を追加するコンポーネント(TodoItemCreator)のロジックも、同じように状態(todoListState)のフック(useTodoList)に移します。すると、コンポーネントは状態を直に参照することさえなくなるのです。
src/state/todoListState.ts
import { useCallback } from 'react';
// import { atom } from 'recoil';
import { atom, useSetRecoilState } from 'recoil';
let id = 0;
const getId = () => {
return id++;
}
export const useTodoList = () => {
const setTodoList = useSetRecoilState(todoListState);
const addListItem = useCallback(
(text: string) => {
setTodoList((oldTodoList) => [
...oldTodoList,
{
id: getId(),
text,
isComplete: false,
},
]);
},
[setTodoList]
);
return { addListItem };
};
src/components/TodoItemCreator.tsx
// import { useSetRecoilState } from 'recoil';
// import { todoListState } from '../state/todoListState';
import { useTodoList } from '../state/todoListState';
/* let id = 0;
const getId = () => {
return id++;
} */
export const TodoItemCreator: FC = () => {
// const setTodoList = useSetRecoilState(todoListState);
const { addListItem } = useTodoList();
const addItem = useCallback(() => {
/* setTodoList((oldTodoList) => [
...oldTodoList,
{
id: getId(),
text: inputValue,
isComplete: false,
},
]); */
addListItem(inputValue);
// }, [inputValue, setTodoList]);
}, [addListItem, inputValue]);
};
Todoリストの項目編集・チェック・削除の操作をコンポーネントでなく状態に備える
Todoリストの各項目を編集・チェック・削除するTodoItemは、もっともロジックの多いコンポーネントです。操作を順に状態(todoListState)に移しましょう。
Todoリストの項目をフックで編集する
まず、Todoリスト項目の編集です。コンポーネント(TodoItem)から状態(todoListState)のフック(useTodoList)に移します。カスタムフックから状態の設定だけでなく参照もできるように、RecoilのuseRecoilStateを用いなければなりません。
src/state/todoListState.ts
// import { atom, useSetRecoilState } from 'recoil';
import { atom, useRecoilState } from 'recoil';
export type TodoItemType = {
id: number;
text: string;
isComplete: boolean;
};
const replaceItemAtIndex = (
arr: TodoItemType[],
index: number,
newValue: TodoItemType
) => {
return [...arr.slice(0, index), newValue, ...arr.slice(index + 1)];
}
export const useTodoList = () => {
// const setTodoList = useSetRecoilState(todoListState);
const [todoList, setTodoList] = useRecoilState(todoListState);
const editItemTextAtIndex = useCallback(
(index: number, item: TodoItemType, text: string) => {
const newList = replaceItemAtIndex(todoList, index, {
...item,
text,
});
setTodoList(newList);
},
[setTodoList, todoList]
);
// return { addListItem };
return { addListItem, editItemTextAtIndex };
};
src/components/TodoItem.tsx
// import { todoListState } from '../state/todoListState';
import { todoListState, useTodoList } from '../state/todoListState';
export const TodoItem: FC<Props> = ({ item }) => {
const { editItemTextAtIndex } = useTodoList();
const editItemText: ChangeEventHandler<HTMLInputElement> = useCallback(
({ target: { value } }) => {
/* const newList = replaceItemAtIndex(todoList, index, {
...item,
text: value,
});
setTodoList(newList); */
editItemTextAtIndex(index, item, value);
},
// [index, item, setTodoList, todoList]
[editItemTextAtIndex, index, item]
);
};
Todo項目のチェックを切り替える
つぎは、Todo項目のチェックの切り替えです。コンポーネント(TodoItem)から状態(todoListState)のフック(useTodoList)に関数(toggleItemCompletionAtIndex)を移します。
src/state/todoListState.ts
export const useTodoList = () => {
const toggleItemCompletionAtIndex = useCallback(
(index: number, item: TodoItemType) => {
const newList = replaceItemAtIndex(todoList, index, {
...item,
isComplete: !item.isComplete,
});
setTodoList(newList);
},
[setTodoList, todoList]
);
// return { addListItem, editItemTextAtIndex };
return { addListItem, editItemTextAtIndex, toggleItemCompletionAtIndex };
};
src/components/TodoItem.tsx
/* const replaceItemAtIndex = (
}; */
export const TodoItem: FC<Props> = ({ item }) => {
// const { editItemTextAtIndex } = useTodoList();
const { editItemTextAtIndex, toggleItemCompletionAtIndex } = useTodoList();
const toggleItemCompletion = useCallback(() => {
/* const newList = replaceItemAtIndex(todoList, index, {
...item,
isComplete: !item.isComplete,
});
setTodoList(newList); */
toggleItemCompletionAtIndex(index, item);
// }, [index, item, setTodoList, todoList]);
}, [index, item, toggleItemCompletionAtIndex]);
};
Todoリストから項目を削除する
最後は、Todoリストからの項目の削除です。コンポーネント(TodoItem)のロジックを、状態(todoListState)のフック(useTodoList)に移します。もはやコンポーネントから状態を書き替える必要がありません。用いるRecoilのフックは、読み取り専用のuseRecoilValueに改めました。これで、すべてのコンポーネントからRecoilの状態は参照するのみで、値を直に書き替えることはなくなったのです。
src/state/todoListState.ts
const removeItemAtIndex = (arr: TodoItemType[], index: number) => {
return [...arr.slice(0, index), ...arr.slice(index + 1)];
}
export const useTodoList = () => {
const deleteItemAtIndex = useCallback(
(index: number) => {
const newList = removeItemAtIndex(todoList, index);
setTodoList(newList);
},
[setTodoList, todoList]
);
// return { addListItem, editItemTextAtIndex, toggleItemCompletionAtIndex };
return {
addListItem,
deleteItemAtIndex,
editItemTextAtIndex,
toggleItemCompletionAtIndex,
};
};
src/components/TodoItem.tsx
// import { useRecoilState } from 'recoil';
import { useRecoilValue } from 'recoil';
/* const removeItemAtIndex = (arr: TodoItemType[], index: number) => {
} */
export const TodoItem: FC<Props> = ({ item }) => {
// const [todoList, setTodoList] = useRecoilState(todoListState);
const todoList = useRecoilValue(todoListState);
// const { editItemTextAtIndex, toggleItemCompletionAtIndex } = useTodoList();
const {
deleteItemAtIndex,
editItemTextAtIndex,
toggleItemCompletionAtIndex,
} = useTodoList();
const deleteItem = useCallback(() => {
/* const newList = removeItemAtIndex(todoList, index);
setTodoList(newList); */
deleteItemAtIndex(index);
// }, [index, setTodoList, todoList]);
}, [deleteItemAtIndex, index]);
};
フィルタの値の定数化と型定義
フィルタに設定する値は、3つの文字列だけです。だとすれば、定数にしてしまえると、管理しやすくスペルミスも防げます。ところが、標準JavaScriptでconst宣言したオブジェクトは、上書きができないだけです。それぞれのプロパティ値は書き替えられてしまいます。そういうとき、オブジェクトにconstアサーションを加えると、各プロパティも読み取り専用になるのです(「constアサーション『as const』(const assertion)」参照)
src/state/todoListFilterState.ts
const FilterValue = {
SHOW_ALL: 'Show All',
SHOW_COMPLETED: 'Show Completed',
SHOW_UNCOMPLETED: 'Show Uncompleted'
} as const;
さらに、3つの値しかとれない型が定められるならより安全になります。TypeScriptの演算子keyofとtypeofを組み合わせれば、そのようなユニオン型がつくれるのです(「オブジェクトからキーの型を生成する」および「TypeScriptの『typeof X[keyof typeof X]』の意味を順を追って理解する」参照)。
src/state/todoListFilterState.ts
type FilterType = typeof FilterValue[keyof typeof FilterValue];
// つぎのユニオン型になる
// type FilterType = 'Show All' | 'Show Completed' | 'Show Uncompleted'
改めて、フィルタの状態のモジュール(src/state/todoListFilterState.ts)は、つぎのように書き直します。
src/state/todoListFilterState.ts
export const FilterValue = {
SHOW_ALL: 'Show All',
SHOW_COMPLETED: 'Show Completed',
SHOW_UNCOMPLETED: 'Show Uncompleted'
} as const;
export type FilterType = typeof FilterValue[keyof typeof FilterValue];
// export const todoListFilterState = atom<string>({
export const todoListFilterState = atom<FilterType>({
// default: 'Show All',
default: FilterValue.SHOW_ALL,
});
export const useFilter = () => {
const setListFilter = useCallback(
// (filter: string) => {
(filter: FilterType) => {
},
);
};
フィルタを選択するコンポーネントも、importした型(FilterType)と値(FilterValue)を使って書き改めます。フィルタの状態に設定する(setListFilterの引数)値の型は、これまでのstringでは合わなくなりましたので、FilterTypeで型アサーションしなければなりません。
src/components/TodoListFilters.tsx
// import { todoListFilterState, useFilter } from '../state/todoListFilterState';
import {
FilterValue,
todoListFilterState,
useFilter,
} from '../state/todoListFilterState';
import type { FilterType } from '../state/todoListFilterState';
export const TodoListFilters: FC = () => {
const updateFilter: ChangeEventHandler<HTMLSelectElement> = useCallback(
({ target: { value } }) => {
// setListFilter(value);
setListFilter(value as FilterType);
},
[setListFilter]
);
return (
<>
<select value={filter} onChange={updateFilter}>
{/* <option value="Show All">All</option> */}
<option value={FilterValue.SHOW_ALL}>All</option>
{/* <option value="Show Completed">Completed</option> */}
<option value={FilterValue.SHOW_COMPLETED}>Completed</option>
{/* <option value="Show Uncompleted">Uncompleted</option> */}
<option value={FilterValue.SHOW_UNCOMPLETED}>Uncompleted</option>
</select>
</>
);
};
もうひとつだけ、Todoリスト項目がみずからを特定するために用いるキーのindexです。これは、useMemoフックでメモ化しておく方がよいでしょう。
src/components/TodoItem.tsx
// import { useCallback } from 'react';
import { useCallback, useMemo } from 'react';
export const TodoItem: FC<Props> = ({ item }) => {
// const index = todoList.findIndex((listItem) => listItem === item);
const index = useMemo(
() => todoList.findIndex((listItem) => listItem === item),
[item, todoList]
);
};
フィルタの値は3つにかぎられ、その型も定められました。他のモジュールからの扱いがしやすく、安全になったでしょう。でき上がったTodoリストアプリケーションの各モジュールのコードは、冒頭に掲げたサンプル001のCodeSandbox作例をご参照ください。