2016年06月29日

React+Redux でTODOリスト

React+Redux でTODOリストを作ってみたのでメモ
import React, { PropTypes } from 'react';
import {render} from 'react-dom';
import { createStore } from 'redux';
import { Provider, connect } from 'react-redux';

/*-------------------------------------------*
* components
*-------------------------------------------*/
const TodoList = ({ todos }) => (
<ul>
{todos.map((todo,i) =>{
return <li key={i}>{todo.text}</li>
}
)}
</ul>
)
class TodoAdd extends React.Component {
handleAddTodo(){
var value = this.refs.todo.value;
this.props.addTodo(value);
this.refs.todo.value = "";
}
render () {
return (
<div>
<input type="text" ref="todo" />
<input type="button" value="add" onClick={this.handleAddTodo.bind(this)}/>
</div>
)
}
}
class TodoApp extends React.Component {
render () {
const { addTodo ,todos} = this.props;
return (
<div>
<TodoList todos={todos}/>
<TodoAdd addTodo={addTodo}/>
</div>
)
}
}
/*-------------------------------------------*
* actions
*-------------------------------------------*/
function addTodo(value) {
return {
type: 'ADD_TODO',
text:value
};
}
/*-------------------------------------------*
* containers
*-------------------------------------------*/
function mapStateToProps(state) {
return state;
}
function mapDispatchToProps(dispatch) {
return {
addTodo: (value) => {
dispatch( addTodo(value) )
}
};
}
const App = connect(
mapStateToProps,
mapDispatchToProps
)(TodoApp);

/*-------------------------------------------*
* Reducer
*-------------------------------------------*/
const initialState = {
todos:[]
}
const store = createStore(function(state = initialState ,action){
switch (action.type) {
case 'ADD_TODO':
return Object.assign({}, state, {
todos: [
...state.todos,
{
text: action.text
}
]
});
default:
return state;
}
});

/*-------------------------------------------*
* render
*-------------------------------------------*/
render(
<Provider store={store}>
<App/ >
</Provider>,
document.getElementById('app')
);
タグ:Redux
posted by ねこまんま at 17:57 | Comment(0) | TrackBack(0) | React | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。

この記事へのトラックバック