"use server"; でexportした関数が意図せず？公開される
Next.js AppRouterで利用できるReactのServer Actions機能。クライアントからサーバ上の処理を関数で呼び出せるので非常に便利ですが、 "use server"; のことをあまり知らず、誤った使い方をすると意図せず公開したくない関数が外部に公開されてしまうケースがあるので注意です（ほとんどこんなケースはないと思いますが、なくはないので注意喚起です）。 Server Actionsの例 Server Actions用の関数として宣言するためには "use server"; が必要です。それ以外は至って普通の非同期関数で大丈夫です。 "use server"; export async function someAction() { return { message: "Server Action", }; } 次に定義したServer Actionsの関数を呼び出
You Don't Need Next.js | ドクセル
[beta] Next.jsクイズ2 • <p>にはなにが表示されるでしょうか？ /app/page.tsx "use client"; import { useCallback, useEffect, useState } from "react"; export default function Home() { const [date, setDate] = useState(); const fetchDate = useCallback(async () => { const response = await fetch("/api"); const data = await response.json(); setDate(data.date); }, []); useEffect(() => { fetchDate(); }, [fetchDate]); return ( <
React 本体のみで Redux フレンドリーな非同期処理を実現するアイデア | Recruit Tech Blog
こんにちは。2019 年 10 月に join した kazuma1989 です。スタディサプリENGLISH の Web 版を担当するフロントエンドデベロッパーです。 今回は、React と Redux を用いたアーキテクチャーで問題になる 非同期処理 を扱うアイデアの一つをご紹介します。Redux フレンドリー と題したように、Redux でなくとも（useReducer や unstated-next でも）適用することができます。 アイデアを EffectComponent と名付けました。そもそも Redux において非同期処理の何が問題なのか、そして EffectComponent とは何か説明します。React Hooks と Redux についてある程度知っていることを前提とします。1)言語は TypeScript です。がんばらないで始める のがおすすめです Redux
react-routerではなくuniversal-routerでReact + ReduxのSSR + SPAする | nabeliwonote
react-routerがv4になったことで既存のアプリケーションが完全に壊れて困っちゃった人。いると思います。 まあでも頑張ればv4でも動くようにできるしv3からマイグレートする系記事もぽつぽつと出ているので、詰んでしまったりv3に居残り続けるみたいな選択にはならないと思いますが。 しかしそこは今後もドラスティックなメジャーバージョンアップを行うことが予想されるreact-routerなので、この際別のルーティングライブラリを選択してもいいのではないか、みたいな。 そういうモチベーションで今回の記事を書いてみました。 そしてこの記事ではreact-routerの代わりにuniversal-routerを使います。 universal-router is… universal-router 名前の通りUniversalなルーターです。クライアントでもサーバーでも動くよっていうあれ。 git
redux-sagaで非同期処理と戦う - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに ReduxはSingle Store、immutableなState、副作用のないReducerという３つの原則を掲げたFluxフレームワークです。しかし他のフレームワークと違って提供しているものは最小限で、とてもフルスタックとは言えない薄さです。そのためすべてにおいて定番と言える書き方が定まっているわけでもなく、どうしようか迷ってしまうことも少なくありません。その筆頭とも言えるのが 非同期処理 の扱いです。コミュニティでは今でもさまざまな方向に模索が続いていますが、よく使われているものだとredux-thunk、redux-
redux-thunkなのかredux-promiseなのかredux-sagaなのか、それともredux#bindActionCreatorsをやめるのか - Qiita
前提 ここで書くのはあくまで個人的な意見です。 react, reduxはどちらも使い方次第でフレームワークっぽくも使えるし、ただのツールとしても使える。だからreact, reduxを使ったフロントアーキテクチャはいくらでもあっていいと思う。 これはそのうちの一つを提案するものです。 とはいえ特別な実装方式を編み出したわけでは全然なくて、むしろ１周して出戻りしたかんじ。 結論 非同期処理をコンテナ(またはそこで使うモジュール)に書くだけ。 今は、非同期処理をするためのredux middlewareを使ってないです。 過去記事(react, redux周りのパッケージ選定とKPT[2016-05-27現在])にて、この辺についてもなんやかんやと言っているけど、今はthunkもpromiseもsagaも使っていない。その実装が凄くシンプルで気に入ってるので紹介します。 どうやるのか red
ReduxでのMiddleware不要論 - Qiita
問題提起 （※タイトルはキャッチーなのにしましたが、Middleware全般の不要論ではありません。非同期処理において不要論です。） Redux使うときに非同期処理はどう書きますか？ 「よくわからないけどMiddleware使うらしい」と思考停止していませんか？ この記事では、Reduxは本来どのように扱うことを想定されているのかと、なぜ非同期処理の文脈でもMiddlewareが出てきたのか、そして「実はMiddleware無くても読みやすく書けるよね」という話をしていこうと思います。 Reduxでの設計を悩む人への個人的な解です。 （気になる・詳しく知りたい箇所などありましたらお気軽にコメントください） この記事のゴール ActionDispatcherという筆者が命名したクラスを使うことで、 複数の非同期処理を含むロジックでも読みやすく書ける ネットワーク通信などを含んでもテストがしや
React Conf 2017 現地レポート (1日目) - Akatsuki Hackers Lab | 株式会社アカツキ（Akatsuki Inc.)
ライブエクスペリエンス事業部 エンジニアの高松(@shimpeiws)です。 2017/3/13 ~ 14の期間で開催中のReact Conf 2017に参加するためにサンノゼに来ています。 React Conf 2017 つい数時間前に終わったばかりの1日目のレポートを現地からお送りします! 会場の様子 1日目の感想 Keynote (Tom Occhino, Jing Chen, Sebastian Markbage) 概要 Tom Occhino Jing Chen Sebastian Markbage A Cartoon Intro to Fiber (Lin Clark) 概要 メモ Next.js: Universal React Made Easy and Simple (Guillermo Rauch) 概要 メモ React + ES.next = ♥ (Ben Ileg
EventEmitterをPromiseに対応させる - Qiita
react-router@1.0.0-rc3を使っていると、onEnterでStoreを更新して、終わってからRouteへ移動したい。Angularで言うui-routerのresolveが欲しいと思っていました。 EventEmitterを継承して.emitをオーバーライドすれば対応可能です。軽くテストを通したライブラリも公開しています。1 具体的には下記のように実装します。 // Dependencies import {EventEmitter} from 'events' // Public class AsyncEmitter extends EventEmitter{ emit(event,...args){ let promises= [] this.listeners(event).forEach(listener=>{ promises.push(listener(...
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - princejwesley/Mancy: >_ Electron based NodeJS REPL :see_no_evil: