1const initialState = {count: 0};
2
3function reducer(state, action) {
4  switch (action.type) {
5    case 'increment':
6      return {count: state.count + 1};
7    case 'decrement':
8      return {count: state.count - 1};
9    default:
10      throw new Error();
11  }
12}
13
14function Counter() {
15  const [state, dispatch] = useReducer(reducer, initialState);
16  return (
17    <>
18      Count: {state.count}
19      <button onClick={() => dispatch({type: 'decrement'})}>-</button>
20      <button onClick={() => dispatch({type: 'increment'})}>+</button>
21    </>
22  );
23}

1import React, { useState, useReducer } from "react";
2import ReactDOM from "react-dom";
3
4import "./styles.css";
5
6function reducer(state, action) {
7  switch (action.type) {
8    case "add":
9      return [...state, action.item];
10    case "remove":
11      return [
12        ...state.slice(0, action.index),
13        ...state.slice(action.index + 1)
14      ];
15    default:
16      throw new Error();
17  }
18}
19
20function FavoriteMovies() {
21  const [movies, dispatch] = useReducer(reducer, [{ name: "Heat" }]);
22  const [newMovie, setNewMovie] = useState("");
23
24  const handleAddClick = () => {
25    if (newMovie === "") {
26      return;
27    }
28    dispatch({ type: "add", item: { name: newMovie } });
29    setNewMovie("");
30  };
31
32  return (
33    <>
34      <div className="movies">
35        {movies.map((movie, index) => {
36          return (
37            <Movie
38              movie={movie}
39              onRemove={() => dispatch({ type: "remove", index })}
40            />
41          );
42        })}
43      </div>
44      <div className="add-movie">
45        <input
46          type="text"
47          value={newMovie}
48          onChange={event => setNewMovie(event.target.value)}
49        />
50        <button onClick={handleAddClick}>Add movie</button>
51      </div>
52    </>
53  );
54}
55
56function Movie({ movie, onRemove }) {
57  return (
58    <div className="movie">
59      <span>{movie.name}</span>
60      <button onClick={onRemove}>Remove</button>
61    </div>
62  );
63}
64
65function App() {
66  return (
67    <div className="App">
68      <h2>My favorite movies</h2>
69      <FavoriteMovies />
70    </div>
71  );
72}
73
74const rootElement = document.getElementById("root");
75ReactDOM.render(<App />, rootElement);
76

1const [state, dispatch] = useReducer(reducer, initialState);