実施保留事項リスト(基礎)

切り替え機能付きtodoListを実現しました.

あつりょくそし

Todos to componentsディレクトリ.jsファイルを生成し、コードを実装します.
Todos.jsファイルにはTodoItem、TodoList、Todosの3つのコンポーネントが作成されています.複数のコンポーネントを作成するのは、コンポーネントのレンダリング性能を最適化するためです.1つのファイルにすべてのコンテンツを作成したり、異なるファイルに分離したりすることができます.

Todos.js

import React, {useState} from 'react';

const TodoItem = React.memo(function TodoItem({ todo, onToggle }){
  return(
    <li
      style={{textDecoration: todo.done ? 'line-through' : 'none'}}
      onClick={()=> onToggle(todo.id)}
    >
      {todo.text}
    </li>
  )
})

const TodoList = React.memo(function TodoList({ todos, onToggle }){
  return (
    <ul>
      {todos.map(todo => (
        <TodoItem key={todo.id} todo={todo} onToggle={onToggle} />
      ))}
    </ul>
  )
});

function Todos({ todos, onCreate, onToggle}){
  const [text, setText] = useState('');
  const onChange = e => setText(e.target.value);
  const onSubmit = e => {
    e.preventDefault();
    onCreate(text);
    setText('');
  }

  return (
    <div>
      <form onSubmit={onSubmit}>
        <input
          value={text}
          placeholder="할 일을 입력하세요..."
          onChange={onChange}
          />
        <button type="submit">ADD</button>
      </form>
      <TodoList todos={todos} onToggle={onToggle} />
    </div>
  )
}

export default Todos;

アプリでレンダリングします.

import React from 'react';
import CounterContainer from './containers/CounterContainer';
import './App.css';
import TodosContainer from './containers/TodosContainer';
function App() {
  return (
    <div>
      <CounterContainer />
      <hr />
      <TodosContainer />
    </div>
  );
}

export default App;

コンテナ構成部品

TodosContainerはコンテナディレクトリにあります.jsファイルを生成し、コードを実装します.

TodosContainer.js

import React, { useCallback } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import Todos from '../components/Todos';
import { addTodo, toggleTodo } from '../modules/todos';// 모듈에서 액션 생성함수를 가져온다.

function TodosContainer(){
  const todos = useSelector(state => state.todos);
  const dispatch = useDispatch();

  const onCreate = text => dispatch(addTodo(text));
  const onToggle = useCallback(id => dispatch(toggleTodo(id)), [dispatch]);

  return <Todos todos={todos} onCreate={onCreate} onToggle={onToggle}/>;
}

export default TodosContainer;

ブラウザで正常にレンダリングされていることがわかります.