Riot.js+Redux+Immutable.jsでカレンダーアプリを作った - Panda Noir
なんでReactじゃないのかって?Riotの方が好きだからですよ。 つくったもの Simple Calendar シンプルなカレンダーです。 (注: この記事は「カレンダーの作り方」、ではなく「Riot.js+Redux+Immutable.jsで開発する際のもろもろについて」です。カレンダーのソースコードはリンク先のHTMLをご覧ください) 環境 Riot.js: 3.0.1 Immutable.js: 3.8.1 Redux: 3.6.0 概要 StoreをImmutable.js+Reduxで作り、ViewはRiot.js、ActionやActionCreatorは自前で作りました。 StateをImmutableにする意味 Reduxでは、一貫してStateは変わりますが、Stateが指すもの自身は変更されません。 ReduxにおいてStateはActionが起きたときのみ変更され
Elmの型で読むReduxやVuexのアーキテクチャ - Qiita
はじめに 近年徐々に複雑になるwebフロントエンドの状態管理の仕組みとして、ReactやVue.jsといったwebフロントエンドフレームワークのお供にReduxやVuexと言ったライブラリを組み合わせて使うことが多いと思います。 それら二つのライブラリは、Elmという高品質webフロントエンド構築のための関数型AltJSが用いているThe Elm Architectureと呼ばれるアーキテクチャに影響を受けて作られました。 追記: ReduxとElmの時系列はReduxの方が先であり、しかしながら状態のimmutableなどは影響を受けていることから、 現在の形のReduxはElmに影響を受けている所がある。 という表現が正しかったようです。 コメントありがとうございます。 参考 Vuexとは何か？｜Vuex reduxjs / redux Elmの型システムや見た目は非常にリーダブルであ
『React』 +『Redux』 + 『Firebase』でLINE風のChat機能を作ろう！ 【準備編】 - Qiita
『React』 +『Redux』 + 『Firebase』でLINE風のChat機能を作ろう！ 【準備編】FirebaseReactreduxmaterial-ui はじめに 前回の記事では『電卓』の実装をしました。 その後以下の面白い記事と動画を見つけたので、早速参考にしてLINE風のChat機能の一部分を実装してみました！ React & Firebaseで簡単なChatアプリを作ってみた Firebaseあればサーバーサイドエンジニア要らない説 一気に全部書くとすごく長くなりそうなので【準備編】、【Component編】、【状態管理編】の３部構成にして記事を書きたいと思います。今回は【準備編】です！ 前回の記事 『React』+『Redux』でiPhoneに入ってるような電卓を作ってみよう！ 次回の記事 『React』 +『Redux』 + 『Firebase』でLINE風のChat
Redux入門【ダイジェスト版】10分で理解するReduxの基礎 - Qiita
ReduxのGithubドキュメントを基に入門用記事として書いたものを、簡潔にまとめました。 もと記事はこちらです。 Redux入門 1日目 Reduxとは Redux入門 2日目 Reduxの基本・Actions Redux入門 3日目 Reduxの基本・Reducers Redux入門 4日目 Reduxの基本・Stores Redux入門 5日目 Reduxの基本・Data Flow Redux入門 6日目 ReduxとReactの連携 Reduxとは Reduxは、ReactJSが扱うUIのstate(状態)を管理をするためのフレームワークです。Reactではstateの管理するデータフローにFluxを提案していますが、ReduxはFluxの概念を拡張してより扱いやすく設計されています。 Reduxはstateを管理するためのライブラリーなので、React以外にもAngularJS
TypeScript FSA での非同期処理 | La Verda Luno
この記事では、 TypeScript FSA で非同期処理するときの知見を忘備録として載せます。 TypeScript FSA 自体は他の方の投稿のほうが詳しく紹介されているので、この記事ではニッチな部分をメインに取り上げて載せています。 サンプルプロジェクトはこちら。 目次 TypeScript FSA 使い方 3.0.0-beta-2 Redux Thunk と一緒に 2.3.0 Redux Saga と一緒に 1.0.0-beta.1 redux-observable と一緒に 1.0.0 最後に TypeScript FSA 使い方 TypeScript FSA は、 “Flux Standard Action” に TypeScript で型を付けることで、 Action 作成関数と Reducer の実装を型安全に行えるようにするライブラリです。 Action の Dispat
React/Redux約三年間書き続けたので知見を共有します | Enigmo Life
Enigmo Advent Calendar 2018の4日目の記事です。 この記事の目的 Enigmoが運営しているBUYMAでは古代から運用しているjQueryの他に、2016年頃から一部ページのフロントエンドをReact/Reduxで構築しています。 私自身もEnigmoに入社してからの約三年間でReact/Reduxアプリケーションの開発に多数携わってきましたので、そこで培った知見を共有したいと思います。 React/Reduxの利点 まずはじめに、ReactとReduxを使うメリットを再確認しておきたいと思います。 それぞれのメリットをしっかりと認識しておくことで、実装する際どう書くか迷ってしまった場合などにそのメリットを最大限活かす選択をすることができます。 Reactの利点 コンポーネント化が容易で再利用性が高い 状態をDOMから分離できる(Stateless) Reduxの
ReduxにImmutable.JSを適用してみた - Qiita
はじめに この記事はDMM.com #1 Advent Calendar 2017 の12/13の記事です。 Immutable.JSを使って、React+Redux製WebアプリのReducerをすっきりさせた方法と結果、及び注意点についてまとめました。 目的 Immutable.JSとは、Facebookが開発した、不変であるデータ構造を扱うためのJavaScriptライブラリです。 開発中だったReact+Reduxアプリでは、開発を進めれば進めるほど、ActionとReducerが肥大化し、改修がしづらくなっていました。 (Reducer内にロジックが含まれていたり、冗長な...stateを書く必要があったり…etc。) 今回は、Immutable.JSを使って、Reducerの肥大化を防ぎ、保守性・改修性を上げることを目的とします。 方法 今回は一般的なReact+Reduxアプ
reduxをtypescriptで使うならこれを使うしかない。(typescript-fsaがすごい) - Qiita
reduxをtypescriptで使うならこれを使うしかない。(typescript-fsaがすごい)TypeScriptreduxtypescript-fsa ReduxとTypeScriptっていまいち相性が良くない？ TypeScriptとReact.jsって相性が良いですよね。 実際Reactを使うのにTypeScriptとかflowを推奨している気がします。 Reactの学習を始めるのにも補助輪として有効ではないかと思います。 その辺は 古いですが 「TypeScriptを使ってreactのチュートリアルを進めると捗るかなと思った。」 を見ていただければご理解いただけると思います。 さて、しかしながらです。この調子でReduxもTypeScriptで学習初めたら捗るかと思いましたが 上手く行きませんでした。 理由の一つとして reduxにおいてAction は概念として重要なもの
Redux Devtools Extensionを使った時のこの感動を伝えたい - Qiita
Reduxというものを知って、さらにこのツールに出会った時に感動したので、ぜひ伝えたいと思います。 Reduxについて 色々解説してくれてますので、それを参考にしてください。 https://qiita.com/kiita312/items/49a1f03445b19cf407b7 ようはUIの状態を管理するフレームワークだそうです。 Redux Devtools Extensionについて Reduxアプリの開発ツールの一つで、 ブラウザの拡張機能からReduxの状態管理を可視化してくれます。 chromeやfirefoxで使えるようです。 デモ 何がいいのか？ 1. デバッグが便利 どのアクションでどの状態になり、どんな値を持つのか一発でわかります。 状態遷移後の値の差分もみれたりします。 2. テストでも活躍するかも テスト時にバグを発見した場合、そのバグを開発者側で再現したい時があ
全社合宿を支えた SPA アプリ開発 〜 React + Rails でプログレッシブ Web アプリ構築〜 - adish intelligence
皆さんはじめまして。2年目新卒エンジニアの坪井(@ufo_ocha)です。普段は先日リリース致しましたhitoboの主にフロント周りを開発しています。 さて、Gaiaxグループでは年に2度、夏と冬に全社合宿を行っています。冬は事業部毎の発表など真面目なコンテンツがメイン、夏はみんなで集まり仕事を忘れて遊びましょうと交流がメインとなっています。だいぶ時間がたってしまっていますが、今回は9月に実施した夏合宿で運営として参加し、合宿用アプリを作成した話です。少しではありますが、当日の様子はこちらからどうぞ。 子ども・パートナーも参加！ガイアックスグループ夏合宿の軌跡 アプリ要件 今回の要件ですが、ざっくりと 合宿のしおり 参加メンバーのプロフィール閲覧 コンテンツのフォトロゲイニング となっています。これは僕ではないのですが、昨年度の冬合宿でしおりをスマホで閲覧しやすいWebページで提供したとこ
The SoundCloud Client in React + Redux
Follow on FacebookIn the beginning of 2016 it was time for me to deep dive into the ReactJs world. I read tons of articles about React and its environment, especially Redux, so far. Several of my colleagues used it in side projects and on a theoretical level I could participate in the discussions. In my company we relied heavily on Angular 1 at this point. Since we are using it in a quite large co
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
なぜReduxを使うのか