ReduxのExamplesに目を通してみる

ReduxのExamplesに目を通してみるReduxはドキュメントがとても充実している。VIDEOのコースもあるし、Examplesもちゃんと考えられてるし、もちろんDocumentationもしっかりある。昨日、VIDEOコースに一通り目を通したので、今日はExamplesを見てみる。と言っても、自分自身ReactやJavaScriptの世界もそんなに得意ではないのでためになると思ったことを都度取り出すという感じにしたいと思う。

公式のExamplesはここにまとまっている。

Counter-valila

redux/examples/counter-vanilla at master · reactjs/redux

Redux_counter_example.png

Counter系はこんな見た目。こちらはReactを使っていない実装。index.htmlしかない。

AsyncはsetTimeoutで書いている。

document.getElementById('incrementAsync')
        .addEventListener('click', function () {
          setTimeout(function () {
            store.dispatch({ type: 'INCREMENT' })
          }, 1000)
        })

Counter

redux/examples/counter at master · reactjs/redux

Reduxの起点をrootにするのは真似しようかな。

<!DOCTYPE html>
<html>
  <head>
    <title>Redux counter example</title>
  </head>
  <body>
    <div id="root">
    </div>
    <script src="/static/bundle.js"></script>
  </body>
</html>

これはProviderを利用していない実装だけど、rootのオブジェクトを一旦変数に入れるやり方は真似したい。下記の例ではrootELの部分。

const store = createStore(counter)
const rootEl = document.getElementById('root')

function render() {
  ReactDOM.render(
    <Counter
      value={store.getState()}
      onIncrement={() => store.dispatch({ type: 'INCREMENT' })}
      onDecrement={() => store.dispatch({ type: 'DECREMENT' })}
    />,
    rootEl  
  )
}

こうやって値を取り出して使いやすくしてるのかな。

const { value, onIncrement, onDecrement } = this.props

スペースは、{' '}で表現しているのかな。

<p>
        Clicked: {value} times
        {' '}
        <button onClick={onIncrement}>
          +
        </button>
...
</p>

Todos

redux/examples/todos at master · reactjs/redux

Todo系の見た目はこんな感じ。

Redux_Todos_example.png

この辺りからディレクトリ構造が出来てくるので参考にできる。actionsとreducersとcomponentsとcontainersというふうに分かれている。App.jsはcomponentsにある。

Counter_js_—__Users_moritanaoki_Desktop_redux.png

componentsにあるものはdispatchもstoreも何も持ってない。 表示に徹している。参考になる。componentsとcontainersは包含関係というよりは役割で分けている。

reducersが複数になって、reducers/index.jsでまとめてる。

reducers/index.js

import { combineReducers } from 'redux'
import todos from './todos'
import visibilityFilter from './visibilityFilter'

const todoApp = combineReducers({
  todos,
  visibilityFilter
})

export default todoApp

todoのreducer。Object.assign…は2番目の引数の3番目のプロパティを更新するというやつだったと思う。覚えなきゃ。

const todo = (state, action) => {
  switch (action.type) {
    case 'ADD_TODO':
      return {
        id: action.id,
        text: action.text,
        completed: false
      }
    case 'TOGGLE_TODO':
      if (state.id !== action.id) {
        return state
      }

      return Object.assign({}, state, {
        completed: !state.completed
      })
    default:
      return state
  }
}

Todos with Undo

redux/examples/todos-with-undo at master · reactjs/redux

ほとんど、Todosと同じだけど、reducerをReduxUndoというのでラップしているらしい。

recudersのtodo.jsの所に下記のようなものがある。これは、ちょっとちゃんとReduxUndoのことを調べて理解したほうがいいな。

import undoable, { distinctState } from 'redux-undo'

...

const undoableTodos = undoable(todos, {
  filter: distinctState()
})

export default undoableTodos

TodoMVC

redux/examples/todomvc at master · reactjs/redux

これは比較のためにあるということ。今まで見てきたのと全然違う書き方。複雑に感じる。ただ、これはちゃんと僕が理解できていない。これは後回し。

Shopping Cart

redux/examples/shopping-cart at master · reactjs/redux

規模が大きくなってきたときに使えるパターンが書かれているらしい。

  • how to store entities in a normalized way by their IDs
  • how to compose reducers on several levels
  • how to define selectors alongside the reducers so the knowledge about the state shape is encapsulated

さらに、ロギングのReduxLogger、条件によってアクションを発火できる?ReduxThunkについても描かれている。

今日はちょっとこの辺でやめておく。入門レベルを超えてきた。ちょっとアプリを書いてから、続きを読んだほうが効率が良さそう。

その他のExample

  • TreeView
    • 深くネストした構造を扱うものらしい。確かにこのネストのハンドリングは知りたい。
    • コードはシンプルなので、ちょっと見てみるのもありかも。
  • Async
    • 非同期のサーバーアクセスを扱う。これは興味あり。次の機会にちゃんと目を通そう。
    • こちらもコードはシンプルなのでちゃんとしたアプリ作る必要が出てきたら目を通す。
  • Universal
    • サーバーレンダリングをするサンプル。
  • RealWorld
    • 最もちゃんとしたExample。ちゃんとサービス作るならここまでは押さえておきたい。
    • keeping fetched entities in a normalized cache
    • implementing a custom middleware for API calls
    • rendering partially loaded data
    • pagination
    • caching responses
    • displaying error messages
    • routing
    • Additionally, it includes Redux DevTools.

TreeViewのイメージ

Redux_tree-view_example.png

Pocket
LINEで送る

You may also like...