react-nativeでiOSアプリ開発者に！　第9回 redux(todoappその2)

みなさんこんにちは、個別指導塾コミット塾長、AWESOME開発担当の船津です。
第何回なのか忘れてきました。まぁ何回でもいいでしょ。

今回のバージョンのgithubリポジトリ

https://github.com/keisukefunatsu/app-education/tree/243ce1c2df27f2dd5c778a95f81796c46535e204/TodoList

二回目ではタップしたタスクに斜線を引くように設定してみます。

参考にしたのはこちらの２つ
公式サイト
http://redux.js.org/docs/basics/ExampleTodoList.html

この方の記事のわかりやすさったら…しゅごい
http://qiita.com/xkumiyu/items/e7e1e8ed6a5d6a6e20dd

今回作るもの

今回は前回のまでの機能に少し手を加えていきます。
変更点のみ記述していきます。

それでは作っていきましょう。

と、その前に、

storeがグローバルになっているのでこのように変更しておきましょう。

containers/app/js

let store = createStore(reducer)

containers/TodoApp.js

• mapDispatchToPropsを使ってactionをまとめます
• アクションそれぞれに関数を割り当てます
• TodoListに対して関数を渡します。
• submitTaskはテキスト入力後に呼び出されます
• onTodoClickはタスクの文字列を押すと呼び出されます

import { toggleTodo } from '../actions/index';
export default class TodoApp extends Component {
  render() {
    const { todos, submitTask, onTodoClick } = this.props;
      return (
        <TodoList todos={todos} submitTask={submitTask} onTodoClick={onTodoClick} />
    )
  }
}

function mapStateToProps(state) {
  return {
    todos: state.todos
  }
}

function mapDispatchToProps(dispatch) {
  return {
    submitTask: (text) => {
      dispatch(addTodo(text))
    },
    onTodoClick: (id) => {
      dispatch(toggleTodo(id))
    }
  }
}
 export default connect(
   mapStateToProps,
   mapDispatchToProps,
 )(TodoApp)

components/TodoList.js
– テキスト入力をするとタスクが追加されます。
– Todoコンポーネントに対してcompletedを渡しています。
– 文字列を押した際にタスクを特定するためにTodoコンポーネントに対して(todo.id)の形でIDを渡しています。

render() {
      const { todos, submitTask, onTodoClick} = this.props;
      return (
      <View style={styles.container}>                
        <View>       
           <TextInput style={styles.input} placeholder={ 'tasks?' } placeholderTextColor={"rgba(198,198,204,1)"} onChangeText={(text) => {this.setState({text})}}
          onSubmitEditing={() => {
              submitTask(this.state.text)
              console.log(todos)
              this.setState({text: ''})              
            }}
          value={(this.state && this.state.text) || ''}
        />
          {todos.map((todo) =>
            <Todo key={todo.id} text={todo.text} completed={todo.completed} {...todo} onPress={() => onTodoClick(todo.id)}
            />       
          )}
         
        </View>        
      </View>
    )
  }

components/Todo.js
– completedがtrueの場合のみ、打ち消し線が入るようになっています。三項演算子ですね。

render(){
    const { text, completed, onPress } = this.props
    return (      
    <View>        
      <TouchableHighlight onPress={onPress} activeOpacity={75 / 100} underlayColor={"rgb(210,210,210)"}>
        <Text style={ completed ? styles.completed : ''}>{text}</Text>        
      </TouchableHighlight>
    </View>
    )
  }
  
  const styles = StyleSheet.create({
  completed: {
    textDecorationLine: 'line-through', 
    textDecorationStyle: 'solid',
  }
})

ここまで出来たらこんな画面になります。

頑張って作ってみてくださいね。

おしまい

次回は完了したタスクを見えないようにしていきます。
次回もがんばるぞい！