2016年06月29日

react-router-reduxでTODOリスト

React+Redux でTODOリストで作ったTODOリストの一覧ページと追加ページを分離してreact-router-reduxで管理するサンプル。
import React, { PropTypes } from 'react';
import {render} from 'react-dom';
import { createStore,combineReducers } from 'redux';
import { Provider, connect } from 'react-redux';
import { Router, Route,Link, browserHistory } from 'react-router'
import { syncHistoryWithStore, routerReducer } from 'react-router-redux'

/*-------------------------------------------*
* components
*-------------------------------------------*/
class TodoList extends React.Component {
render () {
const { todos } = this.props;
return (
<div>
<ul>
{todos.map((todo,i) =>{
return <li key={i}>{todo.text}</li>
})}
</ul>
<Link to="/add">追加</Link>
</div>
)
}
};
class TodoAdd extends React.Component {
handleAddTodo(){
var value = this.refs.todo.value;
this.props.addTodo(value);
browserHistory.push("/");
}
render () {
return (
<div>
<input type="text" ref="todo" />
<input type="button" value="add" onClick={this.handleAddTodo.bind(this)}/>
</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 Add = connect(
mapStateToProps,
mapDispatchToProps
)(TodoAdd);

const List = connect(
mapStateToProps,
mapDispatchToProps
)(TodoList);

/*-------------------------------------------*
* Reducer
*-------------------------------------------*/
const initialTodos = [{text:"aaa"}]
const todos = function(state = initialTodos ,action){
switch (action.type) {
case 'ADD_TODO':
var obj = [
...state,
{
text: action.text
}
];
return obj;
default:
return state;
}
};
const store = createStore(
combineReducers({
todos:todos,
routing: routerReducer
})
);
const history = syncHistoryWithStore(browserHistory, store);
/*-------------------------------------------*
* render
*-------------------------------------------*/
render(
<Provider store={store}>
<Router history={history}>
<Route path="/" component={List} />
<Route path="/add" component={Add}/>
</Router>
</Provider>,
document.getElementById('app')
);
posted by ねこまんま at 19:09 | Comment(0) | TrackBack(0) | React | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

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

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