Redux UIチュートリアル

このチュートリアルではTwigテンプレートエンジン等の代わりにV8JsとRudux-ReactJsを使ってHTMLレンダリングします。 マルチエントリーの非SPAアプリケーションを主な対象としていてJavaScriptではルーターは使用していません。

既存のテンプレートエンジンを使ったWebアプリケーションから、ページ単位でRedux React UIを使ったアプリケーションに移行することができます。

前提条件

  • php7.1
  • V8Js(オプション)
  • node
  • yarn

　※ php7.0での実行はreactjs-deprecated.htmlをご覧ください。

インストール

BEAR.Sundayプロジェクトを作成します。

composer create-project bear/skeleton MyVendor.MyRedux

vendor名をMyVendorにproject名をMyReduxとして入力します。

次にBEAR.ReactJsModuleをインストールします。

cd MyVendor.MyRedux
composer require bear/reactjs-module ~1.1

Reduxのスケルトンアプリををインストールします。

cp -r vendor/bear/reactjs-module/ui-skeleton/redux/ui .
cp vendor/bear/reactjs-module/ui-skeleton/redux/package.json .
yarn install

Redux UIの作成

exampleからcpしてhelloページを作成します。

cp -r ui/src/page/example ui/src/page/hello

ui/entry.jsを変更します。

module.exports = {
  react: 'src/react-bundle.js',
  ssr_hello: 'src/page/hello/app/server',
  hello: [
    'webpack/hot/dev-server',
    'webpack-hot-middleware/client',
    'src/page/hello/app/client',
  ],
};

lintやtest、buildを試してみましょう。

yarn run lint
yarn run test
^C
yarn run build

src/Module/AppModule.phpにモジュールをインストールします。

<?php

namespace MyVendor\MyRedux\Module;

use BEAR\Package\PackageModule;
use BEAR\ReactJsModule\ReduxModule;
use BEAR\Package\AbstractAppModule;
use josegonzalez\Dotenv\Loader as Dotenv;

class AppModule extends AbstractAppModule
{
    /**
     * {@inheritdoc}
     */
    protected function configure()
    {
        //configure()に追加
        $this->install(new ReduxModule($appDir . '/var/www/dist, 'ssr_hello'));
        $this->install(new PackageModule);
    }
}

V8Jsなしの環境で開発する場合

V8Jsが無い環境でクライアントレンダリングのみでの開発もできます。その場合は以下のようにVoidV8Moduleをインストールしてください。

$this->install(new VoidV8Module(new ReduxModule($distDir, 'ssr_hello')));

リソースの作成

既存のsrc/Resource/Page/Index.phpを変更します。リソースオブジェクトのレンダラーをRedux UIにするためにsetRendererセッターインジェクションに@Injectと@Namedをアノテートします。@Namedの値はReduxModuleで指定したJSアプリケーションの名前と同じにします。

<?php

namespace MyVendor\MyRedux\Resource\Page;

use BEAR\Resource\RenderInterface;
use BEAR\Resource\ResourceObject;
use Ray\Di\Di\Inject;
use Ray\Di\Di\Named;

class Index extends ResourceObject
{
    /**
     * @Inject
     * @Named("ssr_hello")
     */
    public function setRenderer(RenderInterface $renderer)
    {
        parent::setRenderer($renderer);
    }

    public function onGet($name = 'BEAR.Sunday')
    {
        $this->body = [
            'title' => 'To ' . $name,
            'hello' => ['message' => 'Hello ' . $name]
        ];

        return $this;
    }
}

テンプレートの作成

リソースのテンプレートsrc/Resource/Page/Index.html.php を作成します。

<?php
/* @var $ssr BEAR\ReactJsModule\Ssr */
$view = $ssr->render(['hello']);

return <<<"EOT"
<!doctype>
<html>
<head>
  <title>{$ssr->escape('title')}</title>
</head>
<body>
  <div id="root">{$view->markup}</div>
  <script src="build/react.bundle.js"></script>
  <script src="build/hello.bundle.js"></script>
  <script>{$view->js}</script>
</body>
</html>
EOT;

リソースオブジェクトからpreloadedStateとして使う値のキーだけを指定してrender()します。上記リソースからページのタイトルにtitle、ReduxのpreloadedStateにhelloを使用します。

実行

startコマンドを実行するとwebpackが実行され127.0.0.1:8080でWebサーバーが実行されます。

yarn run start

開発用にdevコマンドを実行するとphpcs/phpmd監視やHMR、browserSyncの機能と共にstartが実行されます。 注) HMRはpure functionのコンポーネントには対応していないようです。

yarn run dev

デバック

  • Chromeプラグイン React developer tools、Redux devToolsが利用できます。
  • {"title":"To BEAR.Sunday","message":"Hello BEAR.Sunday"}などとJSONが出力された場合はレンダラーのインジェクションが行われていなくて、Json Rendererが使用されています。
  • Unexpected key "{key}" found in preloadedStateの例外は存在しないResouceObject::$bodyのキーを指定していることを示しています。
  • 500エラーが帰ってくる場合はvar/logやcurl にアクセスしてレスポンス詳細を見てみましょう

このチュートリアルで作成したアプリケーションはMyVendor.MyReduxで参照できます。

リファレンス