1import React from 'react';
2import { useSelector } from 'react-redux';
3
4export const CounterComponent = () => { 
5  const counter = useSelector((state) => state.counter) 
6  return <div>
7    {counter}
8  </div>
9}

1import React from 'react'
2import { useSelector } from 'react-redux'
3
4export const CounterComponent = () => {
5  const counter = useSelector((state) => state.counter)
6  return <div>{counter}</div>
7}

1import React from 'react'
2import { useSelector } from 'react-redux'
3
4export const TodoListItem = (props) => {
5  const todo = useSelector((state) => state.todos[props.id])
6  return <div>{todo.text}</div>
7}

1import React from "react";
2import { useDispatch, useSelector } from "react-redux";
3import { addCount } from "./store/counter/actions";
4
5export const Count = () => {
6  const count = useSelector(state => state.counter.count);
7  const dispatch = useDispatch();
8
9  return (
10    <main>
11      <div>Count: {count}</div>
12      <button onClick={() => dispatch(addCount())}>Add to count</button>
13    </main>
14  );
15};
16

1import React from "react";
2import { connect } from "react-redux";
3import { addCount } from "./store/counter/actions";
4
5export const Count = ({ count, addCount }) => {
6  return (
7    <main>
8      <div>Count: {count}</div>
9      <button onClick={addCount}>Add to count</button>
10    </main>
11  );
12};
13
14const mapStateToProps = state => ({
15  count: state.counter.count
16});
17
18const mapDispatchToProps = { addCount };
19
20export default connect(mapStateToProps, mapDispatchToProps)(Count);
21

1import React from 'react'import { useSelector } from 'react-redux'
2export const CounterComponent = () => {  const counter = useSelector((state) => state.counter)  return <div>{counter}</div>}