Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

FluxをjQueryに導入するためjquery.redux.jsを考えてみた

More than 5 years have passed since last update.

FluxをjQueryベースのJavaSctiptプロジェクトに導入したいので
FluxライブラリReduxと連携するためのjQueryプラグインを考えてみました。

jquery.redux.js画像

Fluxの図を編集したものです。Reactを使わずjQueryのAPIで代替します

実装

↓プラグインコード
https://gist.github.com/nowri/bb00a12fe759ea055da7

↓使い方サンプル

// Action:
var increaseAction = function() {
    return {type: 'increase'};
};
var actions = {
    increaseAction: increaseAction
};
// Reducer:
var counter = function(state, action) {
    var count;
    if(typeof state === 'undefined') {
        state = {count: 0};
    }
    count = state.count;
    switch(action.type) {
        case 'increase':
            return {count: count + 1};
        default:
            return state;
    }
};
// Store:
var store = Redux.createStore(counter);
//初期設定
$.reduxInit(actions, store);
$(function() {
    var $App = $("#root");
    CounterTemp = _.template($("#counter").html());
    $App
        .redux("on")//jQueryオブジェクトとReduxを紐付ける
        .on("reduxChange", onReduxChange)
        .click("button", function() {
            $App.trigger("redux:increaseAction", []);
        })
        .html(CounterTemp({count: 0}));
});
function onReduxChange(e, state) {
    $(this).html(CounterTemp({count: state.count}));
}

初期設定

1.
jQueryReduxを読み込みます。(BrowserifyやWebpackを使用しない場合、redux.jsは事前にビルドする必要があります)

2.

$.reduxInit(actions, store);
$("【任意のjQueryオブジェクト】").redux("on");

UserInteractions -> ActionCreators

jquery.redux.js画像

$("【jQueryオブジェクト】").trigger("redux:【action関数名】", ["【引数】"]);

redux("on")されたjQueryオブジェクトから、上記仕様triggerを使ってActionを呼び出すことができます

Change Events + Store Queries

jquery.redux.js画像

$("【jQueryオブジェクト】").on("reduxChange", onReduxChange);
function onReduxChange(e, state) {
  $(this).html(CounterTemp({count: state.count}));
}

redux("on")されたjQueryオブジェクトのreduxChangeをバインドすることで、第2引数のstateオブジェクトからstoreの更新を受け取れるようになります。

サンプル

simplest-redux-example(ES5)を参考にサンプルを作ってみました

デモ

ソース一式

次は

CanvasライブラリとReduxの連携について考えてみたいと思います

nowri
テクニカルディレクター
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away