LoginSignup
5
4

More than 5 years have passed since last update.

reduxを使うためにいろいろお勉強2

Last updated at Posted at 2016-07-04

ツール(スターターキットとscaffold)

スターターキットについて検索

redux react cli - Google 検索
https://goo.gl/W5K0Vw

davezuko/react-redux-starter-kit: Get started with React, Redux, and React-Router!
https://goo.gl/ZTdBbF

banderson/generator-redux: CLI tools for Redux: next-gen functional Flux/React with devtools
https://goo.gl/oG1VE0

SpencerCDixon/redux-cli: An opinionated CLI for building redux/react apps quicker
https://goo.gl/WL7Yst

Redux + React + ES6 の簡単アプリを作成する②(ReactとReduxの連携編) - Qiita
http://goo.gl/feuClD

「redux-cli」

「redux-cli」が比較的シンプルに使えそうなきがする。
でも、使ってみると「react-redux-starter-kit」もインストールされた。
「redux-cli」はscaffoldなどのcliツール的な役割ってことかな。

「react-redux-starter-kit」

下記の記事によるとたくさんのスターターキットがあるらしい。

Reduxを動かしながら理解する | takayukii.blog
http://goo.gl/Ji3jHw

上記「Reduxを動かしながら理解する」は使い方についての理解に役立った。

  • 別建てのSPAにもできる。

多分、webpackの設定を追加してmain.jsのようなものを置く。

  • スターターキット「react-redux-starter-kit」で使われているライブラリ

react-router:ルーター
redux-simple-router:ルーターをreduxに対応さす
redux-actions:アクション関連
redux-thunk:非同期処理

  • gitサブモジュール管理

プロジェクト内で「redux-cli」でプロジェクトを生成するとサブモジュール管理になった。
若干怖いけど続けてみるか。。
たしかに同じにするより分けたほうがいい気もするけど、
なんかサブモジュール怖い。。

webpackで複数のapp.jsを読み込んだら

webpack_requireあたりで衝突したのだけど、、

webpackの設定をいじってみつつ、、

コンパイルしたファイルを別システムから読み込みたい。。
ウェブパックが遅延読み込みできるように、server_hostとかがdevの設定じゃなくprod環境の設定になるようにしたり、、

config/environments.js
compiler_public_path

run devで、cssがおかしい

app/src/Redux/storymakeRedux/src/styles/core.scss
のnormarize.cssのimportをコメントアウト。

react-router-reduxについてやっぱりイメージがわかないのでググる

grails-react-boilerplate で React に入門した - 2日目 React-Router, サーバー通信 - Kariya ( @bati11_ ) の 日記
http://goo.gl/hHHUyX

その案件、Reactで本当に大丈夫ですか? | eureka tech blog
https://goo.gl/YFomhI

JSといえばjQueryだったWebデザイナーが、Reactを1年間使って感じたメリット | dwango creators' blog(ドワンゴクリエイターズブログ)
http://goo.gl/kCKeSe

React + TypeScriptでreact-router-redux - かずきのBlog@hatena
http://goo.gl/PVO6Bv

react-router/app.js at master · reactjs/react-router
https://goo.gl/puiyPb

React-router cheatsheet
http://goo.gl/1XOzUA

react-router の examples をざっと読んでみた - ryhmrt’s blog
http://goo.gl/wSFnXr

reactjs/react-router-redux: Ruthlessly simple bindings to keep react-router and redux in sync
https://goo.gl/OoRfRn

Redux 基礎:Reducer 編 - Qiita
http://goo.gl/1DKc2x

react-router の examples をざっと読んでみた - ryhmrt’s blog
http://goo.gl/wSFnXr

超訳 Redux Documentation - データフロー - Qiita
http://goo.gl/EvytJW

react + redux + react-router のサーバサイドレンダリングを試してみた - フレクトのHeroku Lab
http://goo.gl/eypvGB

How to share the root URL according to the auth status using reactjs, redux and redux-simple-router? - Stack Overflow
http://goo.gl/LJuMX8

react-router/routes.js at master · reactjs/react-router
https://goo.gl/n38Vu4

shared root

きっかけは下記。

ページにかかわらずルートに作る共通のコンポーネントのこと??
グローバルメニューとかを配置したくて、やってみたけど下記のエラーが出て困った

browser.js:49 Warning: [react-router] Location "/counter?q=hoge" did not match any routes

試行錯誤した結果、開発用の環境だけなきがする。

これの具体情報は少なくて下記。
クローンしておいたほうがいいかな。。

あたいの受け渡し

ひとまず下記のようなものが何なのか把握したい。。

state
prop
param
query

5
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
4