Reactの状態管理はReduxの独走状態、2位は大きく離れてswrとreact-queryが競り合い中・・ - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 2021/09/24 追記 これまでは状態管理にReduxやVuexなどの状態管理用ライブラリを使いますが、Graphqlを採用した場合にApollo Clientを利用することでフロントエンドの状態管理の実装がかなり楽になります。 追記終了 2021/01/17 追記 2020年版 満足度ランキング State of JS 2020: JavaScript Flavors https://2020.stateofjs.com/ 最近よく聞く状態管理 pmndrs/jotai: 👻 Primitive, flexible state
reselectでReact Reduxにvalidationの仕組みを実装する 1/2 - Qiita
※ 2019/06/12追記: React Hooksのなかった時代の投稿です。2019/06/12 現在のスタンダードが他にないかよく調べてから読んでください。 本記事はSupership株式会社 Advent Calendar 2016の7日目の記事になります。 株式会社Socketの @notsunohito です。 株式会社SocketはSupership株式会社と同じSyn.グループのメンバーであり Web接客と呼ばれるサービスのひとつであるFlipdeskを展開しています。 今回はFlipdeskの管理画面の一部をReact Reduxで書き直したときに validationを実装するのに利用したライブラリreselect について本日7日目と8日目を2回にわけて書きます。 TL;DR reselectでvalidationを作ってみたら割りと良かった。 本記事で扱うサンプル全
Reduxのreselectとは - Qiita
Reduxにおけるreducer分割とcombineReducersについて - Qiita こちらの記事を読んで、私も（Redux は勉強し始めたばかりだけど）似たような感想を持っていて 最後のコメントに書かれていた reselect というライブラリが気になったので、調べてみました。 取り急ぎ、こちらの公式ドキュメントおよび YouTube にあった動画を見ておおざっぱに理解したつもりでいるので、自分なりに整理してみます。 (公式ドキュメント) Computing Derived Data | Redux (動画) [React/Redux] Logicless Components with Reselect - YouTube 解決したい課題 ドキュメントに書いてあったのと同じく、Redux の basics チュートリアル を例に考えてみる。 このチュートリアルを通して作成したの
React-Reduxのメモ化が分からない人のためにメモ化が分かるまで説明を辞めない - Qiita
背景:React-Reduxを使うときに、メモ化が重要だと理解したので情報発信することにした 開発現場にReact-Reduxを導入しておきながら、チームメンバーから「 俺の実装したコンポーネントの描画遅いんだけどどうにかしてくれ 」と言われたので、「どうにかするのはお前の仕事だぞ♡」、と思いつつ、そうも言ってはいられない状況になったので、本腰入れてドキュメント読みました。React-Reduxのパフォーマンス改善にはどうやらメモ化が重要であると思ったので説明します。色々なサイトやドキュメントは明らかに冗長な説明が多いので、極限までエッセンシャルを絞って説明することで、ゼロ知識からでもある程度、理解できるレベルの説明に落とし込むことに挑戦しました。うちの開発チームで知見として残すために作成したものですが、需要がありそうかなと思ったので、公開します。需要がなければすみませんでした。おかしな点
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-
React+Redux と web3.js を使ったスマートコントラクトアプリ開発 - Qiita
$ geth version Geth Version: 1.7.1-stable Git Commit: 05101641455a754936acc5ddff92f35f5e33181c Architecture: amd64 Protocol Versions: [63 62] Network Id: 1 Go Version: go1.9.1 Operating System: darwin GOPATH=/Users/arosh/go GOROOT=/usr/local/Cellar/go/1.9.1/libexec MetaMask 3.10.9 browser-solidity e6f4dc2 MetaMaskについて MetaMask は Chrome や Firefox のブラウザ拡張として使うことができるウォレットアプリです。このウォレットの大きな特徴は，Mist のよう
React + Typescriptシリーズ（随時更新） - Qiita
問題提起 React始めたいですよね！ でも今時、型のない言語とか使いたくないですよね！ TypeScriptコンパイラもjsxに対応したし、Angular2でもTypeScriptが標準っぽいし、 とりあえずこれから始めるならTypeScriptでしょう。 ということで、個人的に良いのではと考えている技術スタックをまとめてみました。 内容が膨大なのでシリーズにしています。 環境・技術スタック 基本的には以下のように最新に追従していきます。 NodeJS 7.X~ React 15.5 Redux TypeScript 2.3 wepack 2.5 express(開発用の仮サーバーとして) karma （他、各種ライブラリを都度見ていきます） 記事 導入編 Reactで普通のSPAを作るために最低限必要だと筆者が考える構成を順を追って説明していきます。 React + TypeScrip
React+Redux+Express+MongoDBでものすごくシンプルなCRUDアプリをつくる - Qiita
#概要 React+Redux+Express+MongoDBでCRUDアプリを作ります。 この記事の目的は、React/Reduxを触り始めた人が サーバーとの通信の方法（より一般的には非同期処理の方法） Reduxにおけるフォームの扱い ExpressによるAPI node.jsからのMongoDBの操作 Herokuへのデプロイ など、主にサーバー側のデータの操作に関わる基本的な事項を学ぶきっかけを作ることです。 この目的に集中するために、それ以外の点については一切気にしないことにします。 そのため、初心者以外の人（上記の内容を理解している人）がこの記事を読んでも得るものはないと思います。 この記事が書かれた背景には、少し前に自分自身がjavascriptによるフロントエンド開発からwebプログラミングを学び始めたころの経験があります。ReactやReduxの基本的な文法の理解を終え
React+Redux+Express+MongoDBでものすごくシンプルなCRUDアプリをつくる - Qiita
概要 React+Redux+Express+MongoDBでCRUDアプリを作ります。 この記事の目的は、React/Reduxを触り始めた人が サーバーとの通信の方法（より一般的には非同期処理の方法） Reduxにおけるフォームの扱い ExpressによるAPI node.jsからのMongoDBの操作 Herokuへのデプロイ など、主にサーバー側のデータの操作に関わる基本的な事項を学ぶきっかけを作ることです。 この目的に集中するために、それ以外の点については一切気にしないことにします。 そのため、初心者以外の人（上記の内容を理解している人）がこの記事を読んでも得るものはないと思います。 この記事が書かれた背景には、少し前に自分自身がjavascriptによるフロントエンド開発からwebプログラミングを学び始めたころの経験があります。ReactやReduxの基本的な文法の理解を終えて
PHPのV8jsでReactJs-ReduxアプリをSSR - Qiita
(このエントリーは、エキサイトAdvent Calendar 2016 の 12/02の2日目の記事です。エキサイト初の参加ということで私も参加しました。) PHPのV8Jsを使ってRedux-ReactJsアプリケーションをサーバーサイドレンダリングするredux-react-ssrを紹介します。 用語 V8Js SSR Redux V8Js V8JsはPHPの機能拡張でGoogle V8 JavaScript EngineをPHPに組み込みます。PHPから直接JSのコードが実行できます。 $v8 = new V8Js(); /* basic.js */ $js = <<< EOT len = print('Hello' + ' ' + 'World!' + "\\n"); len; EOT; try { var_dump($v8->executeString($js, 'basic.j
Reduxの概念をRxJSとTypeScriptで理解する(初心者向け) - Qiita
(2016/12/15追記) この記事はDeprecatedです。 Reduxの概念をRxJSとTypeScriptで理解する ver.2 が最新版になります。 GitHubリポジトリはこちら → ovrmrw/understanding-redux-with-rxjs git cloneしたらnpm installしてnum run tsですぐに動かせます。 (注: Reactの話は一切出てきません) Reduxとは Redux公式 アプリケーション全体で状態(state)を一つのJSONツリーの構造で持ち、それをActionがキックされる度に全体更新して配信するという概念。 僕は最初FluxとかReduxとかよくわからなかったけど、色々参考にしながら自分で書いてみたらようやく理解できました。 Middlewareという概念はよくわからなかったし今でもよくわかりません。 ロガーとか便利な
RxJS5とredux-observableで最初にハマった部分やら得た知見やらの話 - Qiita
import React from 'react' import ReactDom from 'react-dom' import { createStore, applyMiddleware } from 'redux' import { createEpicMiddleware } from 'redux-observable' import { connect, Provider } from 'react-redux' // rxjsハマり部分。後述 import 'rxjs/add/operator/mapTo' import 'rxjs/add/operator/filter' import 'rxjs/add/operator/delay' // sampleにあるreducer const pingReducer = (state = { isPinging: false
自社サービス採用へ。本気で作るReact+Reduxのプロジェクト構成 - Qiita
サイバー・バズの@yuinchirnです。 弊社で最近リリースした「Cloud-F」というアパレルのクラウド展示会サービスは、フロントサイドはReact + Redux + Webpack、サーバサイドはScala + Akka HTTPで作られています。 今回は、フロント側のReact + Reduxを使ったプロジェクトの構成について紹介していきます。 React + Reduxプロジェクトを作る上で参考になればと思っております。 下記記事を読んで基本を押さえておくと読みやすいと思います。 React+Redux入門 全体のディレクトリ構成 今回はバイヤー向け管理画面、ブランド向け管理画面という二つの画面を作るため、 両方のプロジェクトで共通で利用する部分は/common バイヤー向け管理画面は/buyer ブランド向け管理画面は/brand という３つのReact ＋ Reduxプロジ
React+ReduxをRails環境下で開発する環境構築テンプレート（Webpackも使うし、Reduxのサーバサイドレンダリングもあるよ） - Qiita
色々情報がありますが、断片化されてたので纏めました。 もしこんな環境で開発する人がいれば参考にして下さい。 というか1つの記事に詰め込み過ぎたかもしれません。 ちなみにこの環境構築は以下の記事を参考に作成されています。 WebPackを使ってRailsからJavaScriptを楽に良い感じに分離する Rails + モダンJS環境(Webpack)で新規アプリ作成 RailsでReduxコンテナをサーバサイドレンダリング (use Hypernova by airbnb) 素晴らしい記事に感謝。 今回書いた記事のソースはこちらです。 前提条件 本記事では以下のような開発環境を想定して記載します。 バックエンド：Rails（API） フロントエンド：React（+Redux） (JS)ビルド：Webpack よく、browserifyとRailsを組み合わせた記事とかは見ますが、Webpac
Backbone.jsにReduxを導入してみる - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? Reduxを導入する契機 ここ何年間かSPAアプリの構築にはBackbone.jsを使っています。 小さくて自由度が高いので、スマホのハイブリッドアプリによくマッチングするからです。 ただアプリが大きくなるにつれて、モデルのデータ管理が難しくなってきました。 SPAで作るにあたって、他の画面へモデルを引き継いだり、処理が完了すればモデルを初期化する必要が出てきます。 メニュー等で別の画面に直接飛んだり、入力をし直すために画面を戻った際にモデルのデータが意図せぬ状況になるパターンが増えてきました。 また、扱うモデルも増えてきたため、モデル
React,Redux,Express,Mongoのフルスタックなboilerplate - Qiita
reactjsでwebアプリを作成するにあたって、とても参考になりそうなreact-webpack-nodeというBoilerplateを見つけたので、中身を見てみる。 構成は、 React + Redux Express MongoDB + mongoose となっており、フルスタック。 jsのmodule bundlerはwebpackで、hot reloadにもserver side renderingにも対応。 ログインのサンプル実装まである上に、herokuへのdeploy手順まで記載されているので、 reactjsで何か作りたい時はこれを土台に単に機能を乗せていくだけで良い感が... まずは勉強がてらcommitされているファイルを軽めにみていく。 package.jsonをみてみる scriptsは、 "scripts": { "clean": "rimraf public"
Redux ExampleのTodo Listをはじめからていねいに(1) - Qiita
Reduxの公式ExampleにあるTodo Listを少しづつ書いてみました。 最終的な動作イメージは以下のような感じです。 Github Pagesにもあげていますので、触ってみてください。 基本的なReduxの説明や環境構築などは他のドキュメントに譲るとして、 ここでは各機能ごとに動くものを作りながら、最終的にExampleの形になることを目指します。 Reactがだいたい分かってて（チュートリアルをやったくらい）で、 Reduxを触り始めたくらいの人を対象としています。 Reduxを触り始めて日が浅いので、間違いもあるかと思います。ぜひご指摘ください。 ExampleのTodo Listの機能は次の3つです。 TodoをTodo Listに追加する「Add Todo」 Todoの完了・未完了を切り替える「Toggle Todo」 表示するTodo Listを完了または未完了のTod
React + Redux + TypeScript でWebアプリを作った感想・勉強法と Angular との比較 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 作ったもの 成果物は Alcatraz を便利に検索する Alcatraz Search という web アプリを開発しました を参照ください。 ソースコードは starhoshi/AlcatrazSearch にあり、 GitHub Pages で公開 されています。 今回作るためにした勉強や開発の感想、 React と Angular の比較などをつらつら書いていきます。 多少なりともフロントの心得がある人向けで、あまり説明的ではない内容です。 フロントエンド開発経験 2015年7月くらいから業務で Angular, TypeScr
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Reduxの個人的チュートリアル(redux-toolkitあり) - Qiita
手っ取り早くES6なReduxのコードをテストする(mocha) - Qiita
