最近はそもそも redux-toolkit などがあるので概念的に理解する必要性も薄くなっているのだが、とはいえ説明した方が良いこともある。
最近はそもそも redux-toolkit などがあるので概念的に理解する必要性も薄くなっているのだが、とはいえ説明した方が良いこともある。
Redux の記述量多すぎなので、 Redux の公式ツールでとことん楽をする。 ( Redux Toolkit)JavaScriptReactreduxreact-hooksredux-toolkit 2019/11/20 追記 当記事でメインに取り扱っていたライブラリ名が変更されました。Redux Starter Kit -> Redux Toolkit それに合わせて、本記事もアップデートしています。 追記終わり はじめに Redux Hooks がリリースされたおかげで、Redux の store とコンポーネントのつなぎ込みが簡単になりました。 今回は Redux チームが公式にリリースしている Redux Toolkit を利用すると、Action、Reducer 部分もかなり簡潔に記述できるというお話です。 Redux Hooks については以下の記事を参照してください。 R
この資料のアレ。 mizchi.hatenablog.com Reducer は単なる (State, Action) => State の関数で、redux.combineReducers は複数の reducer を名前空間でマップした新しい reducer にするもの。 Rx分かる人、Redux分かる人向けに、 redux.combineReducers を実装して、Rx.Observable.scan で reducer として実際に動くコードを書いた。 const Rx = require('rx') const combineReducers = reducerMap => { const initialState = Object.entries( reducerMap ).reduce((acc, [key, reducer]) => { return Object.ass
今まで自分で作ったものが十数個、仕事で5社ぐらいの redux を見てきたので、その結果思うところを書く。 前提として、自分はエコシステムに乗るという意味で今では redux 肯定派だが、redux それ自身が過剰に抱えている複雑さはもっと分解されるべきだ、という立場。 Redux がうまく設計されているとどうなるか 一貫した一つの設計論に従うので、考えることがなくなる 難しさが廃されるのではなく、難しい部分が一箇所に集中する。React Component の末端では、何も考えることがなくなる。状態管理という難しい部分を作る人と、末端のコンポーネントのデザインに注力する人を分けられる。 大規模になっても設計が破綻しにくい、というエンタープライズ向きな特性を持つ。が、その技術基盤は(静的)関数型由来の考えが多く、基礎設計や基盤理解にはハイスキルが要求され、需要と適用対象のミスマッチを感じる
Reduxの使い始めにActionやらReducerやらStoreやら新しい概念が出てきて混乱しました。 その時にcreateStoreを実装してみたら流れをよく理解出来たので紹介します。 Reduxでカウンターを実装 シンプルなカウントアプリを作成。今回はstate更新の流れを確認したいので、ActionCreatorやstateのイミュータブルは一旦置いておきます。 import { createStore } from 'redux'; import React from 'react'; import ReactDOM from 'react-dom'; // Action const myAction = { type: 'ACTION_INCREMENT'}; // Reducer const myReducer = (currentState = 0, action) =>
@YassineElouafi2 Redux seen as a mealy machine: reducers compute next state, while Sagas compute next Effect — Yassine Elouafi (@YassineElouafi2) 2016年2月23日 ここ数日、Reduxとはなんぞやということについてさんっざん検索して調べまわっていました。ふとミーリ・マシンっぽいなと思って"Redux Mealy Machine"でググり、Redux-sagaの中の人のこのツイートにたどり着いて、ようやくストンと腑に落ちました。参考1。参考2 ReduxでReducerの中で作用を使うなとかActionCreatorを純粋にしろとか言われてどうすりゃいいんだよウッセーなお前はおれのかーちゃんかよって思った人は多いでしょう。Reduxが何なのか理
[更新: 2016/05/12] react-transportを公開、サンプルコードをredux-saga v0.10.2に対応 本稿は2016年4月19日に開催されたMeguro.es #3にて同名のタイトルで発表した飛び込みLTのフォローアップになります。こちらがわかりにくいLT資料です。 発表ではReduxが導入しにくい状況でも使っていく方法はあるよ、という内容で具体的な利用例をデモをしました。しかし、その背景にはもう少し大きな問題意識があって、「食わず嫌い」とか「Redux疲れ」になる前にちょっと落ち着いてReduxについて冷静に考えてみようよ、ということです。LTではその辺をすっ飛ばしているので資料の構成と大きく異なりますが、Reduxの導入を検討している方のヒントになればと思います。 誤解を招く「React + Redux」という書き方 Reactの導入事例が増えてきた昨今、
これは Redux Advent Calendar 2016 の1日目の記事になります。 作ったもの ソースコード / オンラインデモ カーソルキーで移動、スペースキーでポーズ、エンターキーでドロップ。回転は未実装。 構成 React.js + Redux + redux-saga + Obelisk.js Webpack Babel (ES2016, React, Stage-2) flowtype mocha + power-assert なぜ3Dテトリス? 業務で扱っている機能やアプリケーションではReduxを使っていてあまり困ったことがなく、1年以上のメンテナンスに耐えることができました。一方でReduxつらい、わからんという声は今でも一定数あります。そこで普段とは違ったタイプのアプリケーションを題材にしたら、これまで気付かなかった問題に出会えるかもしれないという期待をもってゲーム
function createThunkMiddleware(extraArgument) { return ({ dispatch, getState }) => next => action => { if (typeof action === 'function') { return action(dispatch, getState, extraArgument); } return next(action); }; } const thunk = createThunkMiddleware(); thunk.withExtraArgument = createThunkMiddleware; export default thunk; ミドルウェアのnextを隠匿して、「function型のactionが来たらそれを実行する」だけ。 素晴らしいコードは短いといういい例ですね。 今
この記事は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アーキテクチ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く