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

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

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

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

参考にしたのはこちらの2つ
公式サイト

この方の記事のわかりやすさったら…しゅごい

今回作るもの

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

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

と、その前に、

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',
  }
})

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

react-nativeでiOSアプリ開発者に! 第9回 redux(todoappその2)
頑張って作ってみてくださいね。

おしまい

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

Instagram Feed

Load More

Instagram

専務取締役

funatsukeisuke

WEBと教育を組み合わせて何かおもしろいことをやってやろうと画策しています。AWESOMEでは開発を担当、個別指導塾コミットでは塾長と2足の草鞋を履きながら日々勉強しています。

他の投稿を見る →