Redux Toolkit の非同期処理の変遷を試してみる
はじめに Reduxにはながーい歴史の中、非同期処理についてはいろいろと語られてきましたが、、🙈 Redux Toolkit v1.5.0からは新たな非同期処理であるRTK Queryが組み込まれました。 RTK Queryはswrやreact-queryと同じようなキャッシュ戦略を駆使したRedux Toolkitチーム謹製のQueryツールとなっています。 いくつかのプロジェクトでも使い始めていたところですが、ちょうどRedux Thunk -> createAsyncThunk -> RTK Queryの書き方の変遷を書いている記事を見つけたので、動作の参考になるサンプルプロジェクトを作成してみました。 あ、でもRedux Thunkは省略です🧟♂️
TypeScript - Variable Declaration [ja]
TypeScript は、JavaScript に基づいて構築された Microsoft の言語です。 この投稿は、 JavaScript とは何なのか、 TypeScript が JavaScript をどのように拡張するのか、そして JavaScript がどのような問題を解決するのかについて、技術以外の概要を説明したものです。 JavaScriptとは何ですか? TypeScript は JavaScript を拡張するものであるため、これが出発点として適しています。 JavaScript は、Web サイトの作成によく使用されます。Web サイトを構築するときは、HTML、CSS、 JavaScript (JS) の 3 つの言語を使用します。大まかに言うと、HTML はページに表示されるコンテンツを定義し、CSS はページの視覚スタイルを定義し、JS はページのインタラクティブな
react + redux-thunk + typescriptでよくあるカウンターのサンプル - 車輪の二度漬け
redux-thunkをreactとtypescriptで使ってみたかったので、よくある簡単なカウンターを作ってみた。 ただ、typescriptに慣れてなかったりそもそもreduxに触ったばっかりって感じで、表示のガワ部分を作ったあとのactionやreducerあたりは全部presentationalなコンポーネントの中に書いている。 いきなりファイルを分けすぎるとかえって把握しづらかったため。 index.tsx import React from "react" import ReactDOM from "react-dom" import "./index.css" import * as serviceWorker from "./serviceWorker" import { Provider } from "react-redux" import thunk from "r
【TypeScript】Generics(ジェネリックス)を理解する - Qiita
概要 TypeScriptにおけるGeneric(ジェネリック)とは何かサンプルコードと共に簡単にまとめました。 Genericsとは？ まず、C#やJavaといった言語もGenericsを搭載しており、TypeScriptに限った機能ではありません。 Genericsは抽象的な型引数を使用して、実際に利用されるまで型が確定しないクラス・関数・インターフェイスを実現する為に使用されます。 これだけだとイメージが湧きづらいと思いますので、実際にサンプルコードを交えて理解していきます。 Genericsの簡単な具体例(関数編) 下記のように同じようなコードを別の型で繰り返す場合があるとします。 // number型 function test(arg: number): number { return arg; } // string型 function test2(arg: string):
TypeScriptの型入門 - Qiita
TypeScriptは型がついたJavaScriptです。プログラミングにおいて型があることの恩恵は大きく、近頃AltJSの代表格として人気を集めています。TypeScriptはもともと型のないJavaScriptで書かれるコードに型を付けることを使命としていることもあり、たまに変な型が追加されます。例えばTypeScript2.8で追加されたconditional typesはずいぶん注目を集めました。これによってTypeScriptの型システムの表現力が広がりましたが、一方でTypeScriptを書いている人の中には、よく分からない型が増えてついて行けない、一部の人たちが長くてよく分からない型定義を書いて喜んでいるだけと思っている方もいるのではないでしょうか。実際、健全にJavaScriptを書いていれば、自分でそのような変な型を書くことはあまり多くありません。 そこで、この記事ではT
【TypeScript】Utility Typesをまとめて理解する - Qiita
Utility Typesとは Utility Typesとはコード内で型変換を容易にする為にTypeScriptが提供する(便利な関数のような)型達です。 Partial<T> Partial<T>はTの全てのプロパティをOptional(任意)のプロパティにしてくれます。 下記のコードPersonでは１つも任意のプロパティが設定されていませんが、Partial<T>を使用する事で、変数taroではfirstNameのみを持つ事ができています。 interface Person { firstName: string lastName: string age: number } const taro: Partial<Person> = { firstName: 'Taro', } console.log(taro); //=> { firstName: 'Taro' } Require
TypeScriptのunsafeな操作まとめ - Qiita
初めに TypeScript(以下TS)はJSに静的型システムを取り入れた言語です。 しかしTSの型システムには多くの穴があり、知らないと型の整合性を壊してしまいます。(型システムが健全でないという) そこで今回はそのような操作をまとめてみました。 間違え、不足等があればコメントで指摘してくださると助かります。 この記事の目的 この記事は「TSの型システムの穴」を批判することが目的ではありません。 実行時のオーバーヘッドを無くすことや利便性などとのトレードオフであることは理解しています。 TSを書く多くの人が「このような操作をすると型の整合性が壊れることがある」ということを理解した上で使ってほしいというのがこの記事の目的です。 型システムの健全性とは 静的言語に限ると、「コンパイルが通ったなら実行時に型情報と値が矛盾しない事が保証されている」事を言います。 例えば「number型の変数に"
Next.jsとTypeScriptでアプリを作る - Qiita
はじめに Next.js 9がリリースされました。 TypeScriptを標準サポートし、ものすごく簡単にアプリが作れるようになったようなので、試してみましたので、お知らせします。 やること Next.jsでアプリを作ってみる。 WebAPIも作って、アプリから叩けるようにする。 できたこと herokuにデプロイしたもの Github 0. セットアップ セットアップは簡単でした。 以下のようにライブラリをインストールしましょう。 $ npm -s i next react react-dom typescript @types/react @types/react-dom @types/node package.jsonのscriptにはnext dev, next build, next startを書いておきましょう。 Next.jsは基本的にはサーバーサイドレンダリングのフレーム
TypeScriptでReact Hooksに入門するチュートリアル - Qiita
はじめに 本投稿の背景と目的 React HooksはReactアプリケーションを開発する際のファーストチョイスになっていると言っても過言ではありません。 Reactの初学者がHooksを学ぶ際に、一通りの情報は公式ドキュメントにまとまっているのですが、従来の公式チュートリアルのHooks版があったらいいのにな〜、と思いました。 というわけで、React Hooksに入門するためのチュートリアルを提供することが本稿の目的です。 なお、このチュートリアルではフックの中でも最も基本的かつ重要な useStateフックとuseEffectフックを習得対象とします。まずはこの2つを覚えれば、ちょっとしたReactアプリケーションの開発を始めることが可能です。 （2020-10-11追記） 「次に学ぶこと」の章を追加しました。 （2021-1-27修正） ステップ4で追加されたBookに設定するid
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TypeScript 2.4+におけるRedux Action - Qiita
React(クラスコンポーネント) + Redux + TypeScript の構築
react-redux + typescriptでcountアプリ作成