connect( state => ({ todos: state.todo.get('todos'), }) )(Wrapped)
const List = () => { const items = useSelector(state => state.todo.todos); const itemKeys = Object.keys(items); const listOfItems = itemKeys.map(itemKey => { const item = items[itemKey]; return ( <ListItem key={item.id} {...item} /> ) }); return ( <ul> {listOfItems} </ul> ) }
connect((state) => ({ todoList: state.todo }),(dispatch) => ({ todoAction: bindActionCreators(todoActions,dispatch) }))
const Tasks = () => { const dispatch = useDispatch(); const tasks = useSelector(state => state.todo.tasks); const [newTaskName, setNewTaskName ] = useState('New Task'); const onToggle = (task, isDone) => { dispatch(toggleTask(task, isDone)); }; const onDelete = (task) => { dispatch(removeTask(task)); }; const doAddTask = () => { dispatch(addTask(newTaskName)); }; const taskList = tasks.map(task => ( <Task key={task.id} task={task} onToggle={onToggle} onDelete={onDelete} /> )); return ( <div> {taskList} <div style={{ padding: 10, display: 'flex' }}> <input type="text" value={newTaskName} onChange={(e) => setNewTaskName(e.target.value)} /> <button onClick={doAddTask}>Add Task</button> </div> </div> ); }
export default function Todo() { const todo = useSelector((state) => state.todo); const dispatch = useDispatch(); const inputRef = useRef(null); return ( <Container> <Input forwardRef={inputRef} /> <Button paramRef={inputRef} /> <nav> <ul> {todo.map((value, index) => ( <li key={index}> <span>{value}</span>{" "} <img src={deleteSVG} alt="delete" onClick={() => { dispatch(action.removeTodo(index)); }} /> </li> ))} </ul> </nav> </Container> ); }
const ToDoList = () => { const todo = useSelector(((state) => state.todo)); const dispatch = useDispatch(); const addTodoAction = (text) => dispatch(addTodo(text));
connect( state => ({ currentTodo: state.todo.currentTodo }), { updateCurrent, saveTodo }, )(TodoForm)
connect((state) => ( {currentTodo: state.todo.currentTodo}), {updateCurrent, saveTodo} )(TodoForm)