reduxで配列操作する時のメモ - Qiita
import { ADD_CARD, UPDATE_CARD, DELETE_CARD, } from './cardTypes' const initialState = { imageList: [] } const cardReducer = (state = initialState, action) => { switch (action.type) { // 要素の追加 case ADD_CARD: return { ...state, imageList: [...state.imageList, action.payload] } // 要素の更新 // 要素のIDで更新対象を確定 case UPDATE_CARD: return { ...state, imageList: state.imageList.map(el => el.id === action.payloa
Redux - Style Guide | Yuuniworks Note
絶対に守ること state を改変しない あらゆるバグのもとになる redux-immutable-state-invariantやimmerなどのツールを活用せよ reducers に side effect を記載しない reducer の結果は state と action にのみ依存すること 下記のようなものを reducer に記載しないこと ajax, timeout, promise などの非同期処理 Date.now()などの乱数生成 シリアライズ出来ない値を state や action に含めない Promise, Symbols, Maps/Sets, Functions, Class instances など ただし reducer に届くまでにredux-thunkなどのミドルウェアで処理される場合は除く 複数の store を作らない 強い推奨事項
Redux - Normalization | Yuuniworks Note
非正規データの弊害 ネストされたデータをそのまま扱うことには下記の弊害がある 同一データが複数の場所に散在するため、一貫性のある更新が困難 ネストしたデータを更新する reducer は見づらい ネストしたデータを更新すると祖先のデータも更新され、結果として大量の再描写が発生する このことから、正規化してデータを持つことが推奨される // 非正規データの例 const blogPosts = [ { id: 'post1', author: { username: 'user1', name: 'User 1' }, body: '......', comments: [ { id: 'comment1', author: { username: 'user2', name: 'User 2' }, comment: '.....', }, { id: 'comment2', autho
Reduxを用いる時にオススメしたい3つのTips - aptpod Tech Blog
はじめまして！WEBチームの黒川と申します！昨年7月にaptpodに入りましてもうすぐaptpod歴1年になります！ aptpodでは主にフロントエンドエンジニアとしてReact/TypeScriptを用いて、お客様向けアプリケーションのUI部分を実装しております。 ご存じの方も多いように、Reactの状態管理にはいくつか方法があり、何を用いるべきかなどでしばしば議論が起こりがちです。代表的なものだけでも、標準APIを用いるuseStateとContextやデファクトスタンダードとなってきているRedux、そして新興のRecoilがあります。 弊社のWEBチームではReduxを採用するケースが多いです。私もReduxについては一通りの知識と経験は持っていたつもりだったのですが、先日担当させていただいたプロジェクトで初めてReduxの設計に取り組んだところ、自分がReduxの思想や勘所につい
Reactを使わずにReduxでステート管理してわかったアプリ設計のコツ
ReduxといえばReactと組み合わせて使うものーーですが、あえて素のJavaScriptを使ってテトリスを開発した著者が得られた、気づきとは？ 私はゼロからなにかを作ったり、全体がどのように動作するのかを理解したりするのが好きな開発者の一人です。このようなことに熱中するのは仕事としては不要と認識していますが、特定のフレームワーク、ライブラリー、モジュールの裏側の認識や理解を助けてくれることは間違いありません。 最近また同じような機会があり、Reduxと素のJavaScript以外はなにも使わずにWebアプリケーションの開発に着手しました。本記事では、採用した解決法やこれまでに学んだことについて触れる前に、アプリを開発した方法や初期の最終的に失敗したバージョンを分析した概要について説明します。 セットアップ React.jsとReduxの組み合わせによって、最新のフロントエンド技術を用い
Vanilla JSで学ぶRedux - Qiita
この記事はReact #1 Advent Calendar 2017の5日目です。 はじめに 私はなんとなくReduxが好きなのですが、 初めて手を出した時はreact-reduxのボイラープレートやディレクトリ構成やstore、Provider、middlewareのセットアップなど初見ではどれも意味不明で、最初はReact専用のフレームワークだと思っていました。 しかしソースコードを読んでみるとRedux自体は実装にflowもTypeScriptも使っていない非常に小さなJSライブラリに過ぎず、Reactとは独立した存在であることが分かりました。 ここではreact-reduxや他のJSフレームワークの事を一旦忘れてVanilla JSでReduxを動かし、純粋にReduxの動作原理について学んでみたいと思います。 FluxアーキテクチャとRedux1 ReduxはFluxアーキテクチ
Reduxの概念をRxJSとTypeScriptで理解する ver.2 - Qiita
Redux Advent Calendar 2016 の15日目です。ちきさんです。 前置きと反省 この記事は僕がQiitaに投稿した中で最もストックされてしまった Reduxの概念をRxJSとTypeScriptで理解する(初心者向け) をリライトしたものです。 今振り返ると前回の記事にはいくつか問題がありました。 ステートとReducerにPromiseを持ち込むのはやはり筋が良くなかった。 Actionのdispatch順を無視して非同期が解決した順に処理が流れる構造になっていた。 1に関しては当初は問題ないと思っていたのですが僕も年を取り、その考えは若気の至りだったのではないかと考えるようになった次第です。 2は要件によってはそれで良いと思うのですが、それでも基本的にはdispatch順に処理する方がより期待される挙動であろうと思った次第です。 「RxJSでReduxを書く」という
たぶんこれが一番分かりやすいと思います React + Redux のフロー図解 - Qiita
【追記】 もうこれ古いから参考にしないでください https://t.co/mXtcc73Orf — もし Laravel が流行しなくなってこられてきてたとしたら、絶対に捨てられてこられてたと思うか (@mpyw) January 26, 2021 Redux にはその昔 connect()() とかいうクソ API と， Redux-Saga とかいう宗教がありました という考古学です — もし Laravel が流行しなくなってこられてきてたとしたら、絶対に捨てられてこられてたと思うか (@mpyw) January 26, 2021 読者対象 Tutorial: Intro To React - React Example: Todo List · Redux 「チュートリアルそれぞれ一周した！Reactは何とか理解できたが，Reduxがさっぱりわかんねぇ！」 ぐらいの人向け。自分
【Redux】ReactのComponentとの連携について | Web活
Reduxを学び始めたばかりの時、ReduxのチュートリアルのReactのComponentと連携しているコードが何をやっているかわからなかったのだが、コードを書いているうちに少しずつわかってきたので、自分の考えの整理のためと同じところで躓いている人のために順序立てて説明していきたい。 まず、Fluxの処理の流れを再確認しておきたい。Fluxの概念図はググれば色々出てくるが、まずAction,Store,Componentで以下のように表してみる。 Action —–> Store —–> Component (—–> Action…) ここで、Componentに目を向けてみるが、ComponentはStoreからstateを得て、必要に応じてActionを発行する。(実際にActionを発行するのはActionCreaterなのでComponentはそれを呼ぶということになる。) さて
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - austinmao/reduxity: React-redux via UniRx + Redux.NET for Unity3D
SSSSLIDE
SSSSLIDE