Go to list of users who liked
More than 5 years have passed since last update.
もうReduxで疲弊しない。Pureduxで始めるRedux。
作りました。
https://github.com/nabepon/puredux
npmにも公開しました。
https://www.npmjs.com/package/puredux
追記
最初6kbだったのが、replaceChildren実装して7kbになりました。
概要
Reactライク、7kb、ReduxのためのView。
Reduxを使うには「stateが更新されたら、viewを更新する」この仕組みがあれば十分です。
より純粋に、ES5でもReduxプロジェクトを始めることができる。
Pureduxは、この達成のために作りました。
JSXやVirtualDOM、複雑なコンパイラ、巨大なランタイムは不要です。
ピュアなJSと、ピュアなReduxで、ピュアなfluxを始めることができます。
背景
Reduxを使うにはReactやVue、RiotなどのViewが必要になります。
しかしReduxのためにこれらを使うにはどれも大げさすぎますし、SPAにしないと容量も大きすぎます。
ファイルをコンパイルする環境が必要ですし、学習コストも多くなってしまう。
こういった理由から、いまだにjQueryを採用するプロジェクトを見かけることがあります。
私は、こういったプロジェクトを何とかしたいと感じました。
理由は、Fluxは廃れないと思いますが、ReactやVueはただのViewなのでいつ廃れてもおかしくありません。
つまり、未来への投資としてFluxは学ぶべきだが、Reactに学習コストを割かなくても良いと思っています。
しかしながら、Reduxを学ぶにはReactを学ばなければいけません。
ここに問題を感じています。
jQueryから最新のWeb開発へ移行できない理由は、あまりにも破壊的すぎることです。
しかも、その破壊さの原因はReactに起因しています。
ただReduxを採用するだけであれば、大げさな開発環境は必要としません。
もっと気軽にjQueryから移行したり、jQueryを併用したプロジェクトにすることができます。
MVCからReactiveプログラミングへ移行したいが移行できずにくすぶっている、
そんな開発者にPureduxが助けになれればと思っています。
インストール方法
npm install --save puredux
使い方
1. create your component
Pureduxを継承したコンポーネントを作成。
varComponent=Puredux.Component.extend({initialize:function(){this.Actions={increment:function(){return{type:'INCREMENT'};}};},template:function(){return'<div><%= count %></div>';},render:function(props){this.renderTemplate(props);},onClick:function(e){this.actions.increment();},});
2. set dispatch
ReduxのdispatchをsetConfigで設定。
functionmyReducer(state,{type}){if(!state){state={count:0};}if(type==='INCREMENT'){return{count:state.count+1};}returnstate;}varstore=Redux.createStore(myReducer);Puredux.setConfig({dispatch:store.dispatch});
3. subscribe
store.subscribeでレンダリングされるようにする。
varcomponent=newComponent();store.subscribe(function(){component.render(store.getState())});
4. render
コンポーネントの初回レンダリングを行う。
component.render(store.getState());document.querySelector('#app').appendChild(component.el);
API
srcのコメントを参照してください。
src/Component.js
Example
es2015
es5
必要なもの
Reduxが必要になりますが、Reduxを使用せずに利用することもできます。
example/src/unusedRedux
flumptとの違い
小さくfluxという意味ではmizchiさんのflumptに近いものがあります。
違いは、全然違うのですがflumptはReactを前提としてReduxの不満を解決しているのに対し、pureduxはredux小さいしエコシステム整ってるからreduxはそのままに小さいviewでfluxをやろう、というコンセプトです。
しかもdispatcherさえゴニョゴニョすれば、Reduxを利用せずにどうにでもfluxできるようになっています。
Reduxそのものの参考
mpywさんの
たぶんこれが一番分かりやすいと思います React + Redux のフロー図解
がとても良くまとまっています。
React + Redux始めた1年前に読みたかった!
Register as a new user and use Qiita more conveniently
- You get articles that match your needs
- You can efficiently read back useful information
- You can use dark theme