redux-saga/effectsについてメモ - 根性駆動開発
qiita.com ⬆️大体これを読めばわかるけど使用した関数や細かいメモを。 今回自分で使ったのはcall, fork, put, take, selectの五つ。 call: promiseの終了を待つ。引数にはpromiseを返す関数を入れる。 fork: 別のタスクの開始。 function*から始まる非同期関数を引数にとる。 put: actionをdispatchする。 take: action、イベントの発生を待つ。actionを待つけど引数に取るのはactionの関数ではなくてaction.typeとなる文字列。 select: stateからデータを取り出す。stateを引数にとる関数を引数にとる。 importするときは、 import { call, fork, put, take, select } from 'redux-saga/effects' のように書く。
Reduxのmiddlewareを積極的に使っていく - Qiita
最初はちょっととっつきにくいけど、責務がはっきり分かれていて比較的コードがごちゃごちゃになりにくい（と思っている）Reduxですが、やはり実戦投入するとどうにも扱いにくい部分が出てきます。 特にそう感じるのは通信系の処理、ユーザーとのインタラクションです。これってつまるところ非同期処理なんですが、処理を依頼する側、つまりActionを投げる側としては「あとのことはまかせた！」と言いたい。Actionを投げる部分ってのはだいたい何かのイベントハンドラだったりしますが、そういう場所に通信やインタラクションの処理をダラダラと書きたくない。 本稿ではそれらの面倒な部分を責務が分離されたメンテナンスのしやすいコードになるようにmiddlewareを活用する例をいくつか紹介します。 その前にmiddlewareについて Reduxの公式ドキュメントではログ出力を例に取り、アプリケーション本体から分離し
redux-sagaで非同期処理と戦う - Qiita
はじめに ReduxはSingle Store、immutableなState、副作用のないReducerという３つの原則を掲げたFluxフレームワークです。しかし他のフレームワークと違って提供しているものは最小限で、とてもフルスタックとは言えない薄さです。そのためすべてにおいて定番と言える書き方が定まっているわけでもなく、どうしようか迷ってしまうことも少なくありません。その筆頭とも言えるのが 非同期処理 の扱いです。コミュニティでは今でもさまざまな方向に模索が続いていますが、よく使われているものだとredux-thunk、redux-promiseあたりでしょうか。Reduxに限定しないのであればreact-side-effectというものもあります。こちらはTwitterのモバイルウェブ版で使われていますね。どれを使っても非同期処理が可能になりますが、それはあくまで道具であって、設計の
React、Redux入門 公式サイトとはちょっと違う角度から
はじめに ここ3週間ほど死ぬほどReactとReduxやって、あれこれ分かるようになったので、これからReact+Reduxで開発を始めたい人向けに記事を書いてみます。 公式サイトの英語記事や、それを翻訳してくれているようなサイトを見てもそれなりに分かるのですが・・・ なんだかんだ言って難しい。 Reactの理解はなんとか出来ても、Reduxが特に難しい。 欲張りなんですが、とにかく両方をサーッと理解して、さっさとアプリ組みたいよという方の助けになれればと・・・ 考えていく手順 画面イメージ 画面を構築するためのコンポーネント階層図 ステート イベント 基本的にこの４つを考えればOKです。 既に別の記事で書いている RailsとReactとReduxを組み合わせた掲示板アプリの画面を例にとって説明します。 まずは作るアプリの画面イメージを頭の中で構築してください。紙に絵を書いてみたりすると
Building React Applications with Idiomatic Redux
This course will pick up where we left off with the Redux Fundamentals course. If you haven't watched that yet, you are highly encouraged to do so! You are about to learn practical production ready techniques for building your React and Redux applications. You will explore advanced state management, middleware, React Router integration, and other common problems you are likely to encounter while b
Reactでシンセサイザーを作った話 - Speee DEVELOPER BLOG
こんにちは、nishayaです。 管理部のエンジニアとして、社内向けのシステムを作ったり、 社内で開催されるイベントでコーヒーを淹れたりしています。 社内向けだからこそできる冒険もある、ということで、 現在はReact/Reduxを用いたSPA開発を行っています。 今回のSpeeeKaigi(下記の記事を参照)では、 ReactとReduxを使ってシンセサイザーを作る話をしました。 tech.speee.jp 発表資料 使用したもの React Redux Web MIDI API Web Audio API Web MIDI APIを使用しているため、今回のターゲットブラウザはGoogle Chromeのみとしました。 そのため、webkit プレフィクス付きのAudioContextにも対応していません。 モチベーション 業務でSPA開発にReact/Reduxを使用するという決定をし
Fundamentals of Redux Course from Dan Abramov
In this comprehensive tutorial, Dan Abramov - the creator of Redux - will teach you how to manage state in your React application with Redux. State management is absolutely critical in providing users with a well-crafted experience with minimal bugs. It's also one of the hardest aspects of a modern front-end application to get right. Redux provides a solid, stable, and mature solution to managing
React Tutorial Example - Qiita
項目が多いので React tutorial example series に分けました。 モジュールのバーッションをアップデートして、内容も少しアップグレードしています。 React Tutorial Example (Express) React Tutorial Example (Hot Module Replacement) React Tutorial Example (Redux) React Tutorial Example (ECMAScript 2015) React Tutorial Example (Convention) React Tutorial Example (PostCSS) React Tutorial Example (Package) React Tutorial Example (Jest) React Tutorial Example (Elec
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Redux 基礎：Reducer 編 - Qiita