はじめに Reduxのチュートリアル用のプレゼンテーションをほぼそのまま乗っけます。間違っているところとかあるかもですのでご承知ください。 比較用のTodoアプリをどうぞ 1.Reduxの基本 Reduxの基本構造 単方向データフロー 純粋な関数の多用 Action Actionは起こったイベントを表す interface PayloadAction<P, T extends string, M, E> { type: T; payload: P; meta: M; error: E; } action.type - Actionを識別する文字列 アクションの名前はシステムが行うことではなく実際に起こったことを書く 例) (x) 'CREATE_COMMENT' (o)'POST_COMMENT' action.payload - Actionに必要なデータ action.meta - a
![Reduxの個人的チュートリアル(redux-toolkitあり) - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/14d790193507e641d5178863bf2d01bd61ddfcc6/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Fadvent-calendar-ogp-background-7940cd1c8db80a7ec40711d90f43539e.jpg%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9UmVkdXglRTMlODElQUUlRTUlODAlOEIlRTQlQkElQkElRTclOUElODQlRTMlODMlODElRTMlODMlQTUlRTMlODMlQkMlRTMlODMlODglRTMlODMlQUElRTMlODIlQTIlRTMlODMlQUIlMjhyZWR1eC10b29sa2l0JUUzJTgxJTgyJUUzJTgyJThBJTI5JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMzQTNDM0MmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz05YTNmOTcyZjNkZGQ3NGZhNGJjM2ZkYTFmZGUwODJjNA%26mark-x%3D120%26mark-y%3D96%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9OTcyJnR4dD0lNDB5dXRhcm8tdCZ0eHQtY29sb3I9JTIzM0EzQzNDJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9YTA0YWMwYWM4ZjYxZmE5MTMyMTFlMjEyODkxODk3Y2E%26blend-x%3D120%26blend-y%3D500%26blend-mode%3Dnormal%26s%3D4b31f1a0547851815cfb9db12082d082)