目次
1. はじめに
Read Me · Redux のチュートリアルをやってみたので、学んだことをメモします。
2. Redux について
Redux は実装のパターンです。
Redux と React を使ったこのサンプルアプリケーションは、おおよそ以下のような構成になっています。
また、action
、reducre
, state
の関係は以下のようになります(今回のチュートリアルにおいては)。
action
、reducre
, state
の関係- アプリケーションとして保持する値(
state
)のそれぞれに対して、1つずつreducer
を用意します(1:1対応)。つまり、ある1つの値を更新する処理は複数あっても 1つのreducre
にまとめます。その中のどの処理を実行するかは、reducre
に渡されるaction
引数のtype
属性で判別します。 action
は、Container component 側からstore.dispatch()
メソッドを実行する際に渡すオブジェクトですが、store.dispatch()
メソッドの内部では 1つ1つのreducer
に渡されています。action
とreducre
は1:1対応であるとは限りません。複数のaction
が 1つのreducer
で処理されることもありますので、N:1対応となります。
2. Action と Action Creator
- Container 内の dispatch を実行するところで引数として使用する。
- アプリケーション開発者が用意する。
Action
- JavaScriptのオブジェクトである。
- 何が起きるか?を記述する。
type
プロパティは必須。type
プロパティ以外に、どのようなプロパティを用意するのがよいかについては以下が参考になる。
Action Creators
- Actionを返す関数。
関連ソースコード
actions/index.js
- ActionCreatorを定義しており、その中から Actionを返している。
... export const addTodo = (text) => { return { type: 'ADD_TODO', id: nextTodoId++, text } } ...
containers/AddTodo.js
- Container内のイベントリスナーで、Actionを引数にしてdispatchを実行している。
... dispatch(addTodo(input.value)) ...
3. Reducers
- state と action を受け取って、新しい state を返す関数。
- アプリケーション開発者が用意する。
- 副作用があってはいけない。
- デフォルト引数を使えば、文字通りそれが初期値となる。
- 複数作ることができる。
- その場合は、
combineReducers()
でまとめることができる。
- その場合は、
関連ソースコード
reducers/todos.js
- Reducerを定義している。
... const todos = (state = [], action) => { switch (action.type) { case 'ADD_TODO': return [ ...state, todo(undefined, action) ] case 'TOGGLE_TODO': return state.map(t => todo(t, action) ) default: return state } } export default todos
index.js
- Reducerを
createStore
に渡して Storeを生成している。... import todoApp from './reducers' ... let store = createStore(todoApp) ...
4. Store
createStore()
に、Reducer を渡して作成する。
用意されているメソッド
getState
- 現在の state が取得できる。
dispatch
- state を変更するような処理を実行する。
subscribe
- このメソッドに関数を渡せば、
dispatch
のタイミングで実行してくれる。
State
- 状態を表すオブジェクト
- Redux側が管理する。Storeの中で保持される。
store.getState()
で取得できる。- Stateを変更できるのは、
dispatch
のみである。 - 階層的に値を保持できる(state tree と呼ばれる)。
- データと UIの状態は、分けて保持するとよい。
- データはなるべく正規化した状態で持つと良い。
関連ソースコード
index.js
- Reducerを
createStore
に渡して Storeを生成している。... import todoApp from './reducers' ... let store = createStore(todoApp) ...
reducers/todos.js
- Reducerを定義している。
- Reducer のメソッドが返しているオブジェクトが Stateである。
... const todos = (state = [], action) => { switch (action.type) { case 'ADD_TODO': return [ ...state, todo(undefined, action) ] case 'TOGGLE_TODO': return state.map(t => todo(t, action) ) default: return state } } export default todos
5. Provider
- react-redux が提供する。
- Redux と React を仲介する。
- この Provider でラップされた Container は、内部で Store にアクセスできるようになる。
- このおかげで、Container 内で直接 Storeにアクセスするコードを書く必要がなくなる。
関連ソースコード
index.js
- AppというReactコンポーネントをラップしているのが、Providerである。
... import { render } from 'react-dom' import { Provider } from 'react-redux' ... import App from './components/App' ... render( <Provider store={store}> <App /> </Provider>, document.getElementById('root') )
6. Container
- ReduxのStore と、プレゼンテーション層用のReactコンポーネントを仲介する層である。
- 形式的には こちらもReactコンポーネントである。
connect()
で、Container とプレゼンテーション層用のReactコンポーネントを紐付けることができる。
- こちらのReactコンポーネントが、データ取得や stateの変更処理などを保持するおかげで、プレゼンテーション層用となるReactコンポーネントの再利用性が高まる。
- プレゼンテーション層用のReactコンポーネントと1対1で対応するわけではない。
- Reactコンポーネントを2つの層に分けるという考え方が以前からあるらしい。
connect()
関数には、プレゼンテーション層用のReactコンポーネントに渡す値を用意するメソッドや、イベントハンドラを渡す。
関連ソースコード
containers/FilterLink.js
- Container内で、
mapStateToProps
とmapDispatchToProps
を定義し、connect
を使って、ListというReactコンポーネントをラップした FilterLinkというReactコンポーネントを生成している。import { connect } from 'react-redux' import { setVisibilityFilter } from '../actions' import Link from '../components/Link' const mapStateToProps = (state, ownProps) => { return { active: ownProps.filter === state.visibilityFilter } } const mapDispatchToProps = (dispatch, ownProps) => { return { onClick: () => { dispatch(setVisibilityFilter(ownProps.filter)) } } } const FilterLink = connect( mapStateToProps, mapDispatchToProps )(Link) export default FilterLink
7. 参考サイト
元のチュートリアルの内容が更新されると困るので、使用しているコードを以下に記載しておきます。
Example: Todo List
This is the complete source code of the tiny todo app we built during the basics tutorial.
Entry Point
index.js
import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import { createStore } from 'redux'
import todoApp from './reducers'
import App from './components/App'
let store = createStore(todoApp)
render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
)
Action Creators
actions/index.js
let nextTodoId = 0
export const addTodo = (text) => {
return {
type: 'ADD_TODO',
id: nextTodoId++,
text
}
}
export const setVisibilityFilter = (filter) => {
return {
type: 'SET_VISIBILITY_FILTER',
filter
}
}
export const toggleTodo = (id) => {
return {
type: 'TOGGLE_TODO',
id
}
}
Reducers
reducers/todos.js
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
}
}
const todos = (state = [], action) => {
switch (action.type) {
case 'ADD_TODO':
return [
...state,
todo(undefined, action)
]
case 'TOGGLE_TODO':
return state.map(t =>
todo(t, action)
)
default:
return state
}
}
export default todos
reducers/visibilityFilter.js
const visibilityFilter = (state = 'SHOW_ALL', action) => {
switch (action.type) {
case 'SET_VISIBILITY_FILTER':
return action.filter
default:
return state
}
}
export default visibilityFilter
reducers/index.js
import { combineReducers } from 'redux'
import todos from './todos'
import visibilityFilter from './visibilityFilter'
const todoApp = combineReducers({
todos,
visibilityFilter
})
export default todoApp
Presentational Components
components/Todo.js
import React, { PropTypes } from 'react'
const Todo = ({ onClick, completed, text }) => (
<li
onClick={onClick}
style={{
textDecoration: completed ? 'line-through' : 'none'
}}
>
{text}
</li>
)
Todo.propTypes = {
onClick: PropTypes.func.isRequired,
completed: PropTypes.bool.isRequired,
text: PropTypes.string.isRequired
}
export default Todo
components/TodoList.js
import React, { PropTypes } from 'react'
import Todo from './Todo'
const TodoList = ({ todos, onTodoClick }) => (
<ul>
{todos.map(todo =>
<Todo
key={todo.id}
{...todo}
onClick={() => onTodoClick(todo.id)}
/>
)}
</ul>
)
TodoList.propTypes = {
todos: PropTypes.arrayOf(PropTypes.shape({
id: PropTypes.number.isRequired,
completed: PropTypes.bool.isRequired,
text: PropTypes.string.isRequired
}).isRequired).isRequired,
onTodoClick: PropTypes.func.isRequired
}
export default TodoList
components/Link.js
import React, { PropTypes } from 'react'
const Link = ({ active, children, onClick }) => {
if (active) {
return <span>{children}</span>
}
return (
<a href="#"
onClick={e => {
e.preventDefault()
onClick()
}}
>
{children}
</a>
)
}
Link.propTypes = {
active: PropTypes.bool.isRequired,
children: PropTypes.node.isRequired,
onClick: PropTypes.func.isRequired
}
export default Link
import React from 'react'
import FilterLink from '../containers/FilterLink'
const Footer = () => (
<p>
Show:
{" "}
<FilterLink filter="SHOW_ALL">
All
</FilterLink>
{", "}
<FilterLink filter="SHOW_ACTIVE">
Active
</FilterLink>
{", "}
<FilterLink filter="SHOW_COMPLETED">
Completed
</FilterLink>
</p>
)
export default Footer
components/App.js
import React from 'react'
import Footer from './Footer'
import AddTodo from '../containers/AddTodo'
import VisibleTodoList from '../containers/VisibleTodoList'
const App = () => (
<div>
<AddTodo />
<VisibleTodoList />
<Footer />
</div>
)
export default App
Container Components
containers/VisibleTodoList.js
import { connect } from 'react-redux'
import { toggleTodo } from '../actions'
import TodoList from '../components/TodoList'
const getVisibleTodos = (todos, filter) => {
switch (filter) {
case 'SHOW_ALL':
return todos
case 'SHOW_COMPLETED':
return todos.filter(t => t.completed)
case 'SHOW_ACTIVE':
return todos.filter(t => !t.completed)
}
}
const mapStateToProps = (state) => {
return {
todos: getVisibleTodos(state.todos, state.visibilityFilter)
}
}
const mapDispatchToProps = (dispatch) => {
return {
onTodoClick: (id) => {
dispatch(toggleTodo(id))
}
}
}
const VisibleTodoList = connect(
mapStateToProps,
mapDispatchToProps
)(TodoList)
export default VisibleTodoList
containers/FilterLink.js
import { connect } from 'react-redux'
import { setVisibilityFilter } from '../actions'
import Link from '../components/Link'
const mapStateToProps = (state, ownProps) => {
return {
active: ownProps.filter === state.visibilityFilter
}
}
const mapDispatchToProps = (dispatch, ownProps) => {
return {
onClick: () => {
dispatch(setVisibilityFilter(ownProps.filter))
}
}
}
const FilterLink = connect(
mapStateToProps,
mapDispatchToProps
)(Link)
export default FilterLink
Other Components
containers/AddTodo.js
import React from 'react'
import { connect } from 'react-redux'
import { addTodo } from '../actions'
let AddTodo = ({ dispatch }) => {
let input
return (
<div>
<form onSubmit={e => {
e.preventDefault()
if (!input.value.trim()) {
return
}
dispatch(addTodo(input.value))
input.value = ''
}}>
<input ref={node => {
input = node
}} />
<button type="submit">
Add Todo
</button>
</form>
</div>
)
}
AddTodo = connect()(AddTodo)
export default AddTodo