TypeScriptでReactをやるときは、小さいアプリでもReduxを最初から使ってもいいかもねというお話 | フューチャー技術ブログ
TypeScriptでReactをやるときは、小さいアプリでもReduxを最初から使ってもいいかもねというお話 前日の丸野さんがReduxを分かりやすく解説してみたというReduxの基本的な紹介を行いました。Reduxはコンパクトなライブラリながらよく考えられた仕組みです。Jetpack ComposeやらFlutterやら、ReactインスパイアなGUIフレームワークも増えているので、JavaScript（TypeScriptではなく） + Reduxをやってみるのは、ウェブに限らず、今後のユーザーインタフェース関連のコードを触るための理解力向上には良いと思います。 本エントリーは、プロダクションコードでたくさんRedux周りにもreducerなどを実装しなくてはいけなくなったときの次のステップとして、Redux Toolkitの紹介をします。 たいてい、Reduxは導入コストが大きく、
ぼくのかんがえたさいきょうの useState + useContext よりも Redux のほうが大抵勝っている
「Redux は学習コストが高い」などと言って useState（または useReducer）と useContext を組み合わせ 劣化 オレオレ Redux を作ってしまうのを見かけます[1]。よくないことだと思いますが、気持ちは非常にわかります。Redux エコシステムがそういう気持ちにさせてしまう部分は大いにあります。 Redux は それ単体なら 学習コストは useReducer + useContext と同等であることを示してこの気持ち（誤解）を解かしつつ、なぜそういう気持ちになってしまうのか考察してみます。 まず useState と useReducer の違いを押さえておく 知っている方はスキップしてください。 useState と useReducer は本質的には同等で、どちらもコンポーネントにステート（状態）を持たせる役割があります。次のようなカウンターアプリ
はじめまして！WEBチームの黒川と申します！昨年7月にaptpodに入りましてもうすぐaptpod歴1年になります！ aptpodでは主にフロントエンドエンジニアとしてReact/TypeScriptを用いて、お客様向けアプリケーションのUI部分を実装しております。 ご存じの方も多いように、Reactの状態管理にはいくつか方法があり、何を用いるべきかなどでしばしば議論が起こりがちです。代表的なものだけでも、標準APIを用いるuseStateとContextやデファクトスタンダードとなってきているRedux、そして新興のRecoilがあります。 弊社のWEBチームではReduxを採用するケースが多いです。私もReduxについては一通りの知識と経験は持っていたつもりだったのですが、先日担当させていただいたプロジェクトで初めてReduxの設計に取り組んだところ、自分がReduxの思想や勘所につい
HookとRedux ToolkitでReact Reduxに入門する | Hypertext Candy
この記事では、React アプリケーションに Redux を組み合わせる方法を紹介します。 タイトルの通り、React の機能である Hook と Redux の組み込みを簡単にしてくれるライブラリ Redux Toolkit を活用した比較的新しめの方法なので、他の解説記事とは少し異なる記述になるかもしれません。 これから React や Redux を勉強する方は戸惑うかもしれませんが、導入方法がいくつかあるというだけで、どちらも間違いではないので、参考の一つとして読んでください。 Redux とは 状態管理 Redux とは、JavaScript製の状態管理ライブラリです。 「状態」とは、アプリケーションで扱う動的なデータという理解でよいでしょう。たとえばユーザー名とか、いいねの数が「状態」です。状態は時系列とともに変化します。 状態管理ライブラリが解決する問題は、コンポーネントをま
最近 Redux Toolkit というReduxのツールがあることを知りました。 公式ドキュメントのチュートリアルを写経してみたところ、かなり良かったのでご紹介します。 Redux Toolkit とは Redux ToolkitとはReduxをより簡潔に記述するためのツールです。 はじめはredux-starter-kitという名前で2018年から開発され、2019/10にv1.0がリリースされました。 Redux Toolkitは公式に作られたツールでReduxの公式サイトでも紹介するページがあります。 サンプルコード Redux Toolkitを使ったコードを見てみましょう。 const todosSlice = createSlice({ name: 'todos', // ① initialState: [], // ② reducers: { addTodo(state, a
The Redux core docs site at https://redux.js.org contains the primary tutorials for learning Redux, including how to use Redux Toolkit and React-Redux together. To avoid duplicating explanations between the Redux core and Redux Toolkit documentation, we've focused on making the Redux core docs tutorials comprehensive, and point to them instead of having extended tutorials here in the Redux Toolkit
Redux Toolkit で Async Thunk が曲者なので詳しく解説する - HRBrain Blog
こんにちは HRBrainでフロントエンドを書いている鈴木です この記事はHRBrainAdventCalendar8日目の記事です Reduxには @reduxjs/toolkit という超メガドデカハチャメチャ便利ライブラリがありますが、 createAsyncThunk で作ったコードでなんやかんやしようとするとかなりハマったのでそちらの紹介です redux-toolkit.js.org 型パラしんどい 結論 Returned ThunkArg ThunkApiConfig 使い方 動きがいまいちわからん 作った関数を実行する 非同期のアクションを受け取る おわりに 型パラしんどい createAsyncThunk には3つの型パラメーターが必要ですが、複雑でかなりしんどいです まずは型定義を見てみましょう function createAsyncThunk< Returned, T
Redux ToolkitのcreateAsyncThunkで非同期処理を実装する方法 | Enjoy IT Life
createAsyncThunkについて createAsyncThunkとは非同期処理の実行状況に応じたActionCreatorを生成する関数です。 createAsyncThunkは2つのパラメータを持ちます。 第1引数はtypePrefixと呼ばれる文字列です。typePrefixはActionTypeの接頭辞として利用されます。 第2引数はpayloadCreatorと呼ばれるasync関数（Promiseを返す非同期処理の関数）です。 createAsyncThunkはasync関数で処理されるPromiseの状態に応じたActionCreatorを返します。 createAsyncThunkに関する戻り値 createAsyncThunkによって作成されるActionCreator、およびActionCreatorがdispatchするActionオブジェクトの値について紹介
はじめに 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
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Reduxを用いる時にオススメしたい3つのTips - aptpod Tech Blog
いまReduxを導入するならRedux Toolkitを使うべき - Qiita
Tutorials Overview | Redux Toolkit
Reduxの個人的チュートリアル(redux-toolkitあり) - Qiita