react-patterns-evolution/5-function-components-with-redux-using-hooks.html at master · marcogrcr/react-patterns-evolution · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>React playground</title>
  </head>
  <body>
    <div id="app"></div>

    <!-- react -->
    <script
      crossorigin
      src="https://unpkg.com/react@16/umd/react.development.js"
    ></script>
    <script
      crossorigin
      src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"
    ></script>

    <!-- redux -->
    <script crossorigin src="https://unpkg.com/redux/dist/redux.js"></script>

    <!-- react-redux -->
    <script
      crossorigin
      src="https://unpkg.com/react-redux@7.1.0/dist/react-redux.js"
    ></script>

    <!-- babel -->
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

    <script type="text/babel">
      //
      // Imports
      const { createElement, Fragment, useEffect } = React;
      const { render } = ReactDOM;
      const { createStore } = Redux;
      const { Provider, useDispatch, useSelector } = ReactRedux;

      //
      // Redux setup
      const rootReducer = (state = { count: 0, text: "" }, action) => {
        switch (action.type) {
          case "INCREASE_COUNT":
            return { ...state, count: state.count + 1 };
          case "DECREASE_COUNT":
            return { ...state, count: state.count - 1 };
          case "SET_TEXT":
            return { ...state, text: action.value };
          default:
            return state;
        }
      };
      const store = createStore(rootReducer);

      //
      // Custom React hooks
      function useCount() {
        const count = useSelector(state => state.count);
        const dispatch = useDispatch();

        return [
          count,
          () => dispatch({ type: "INCREASE_COUNT" }),
          () => dispatch({ type: "DECREASE_COUNT" })
        ];
      }

      function useText() {
        const text = useSelector(state => state.text);
        const dispatch = useDispatch();

        return [text, value => dispatch({ type: "SET_TEXT", value })];
      }

      //
      // React components
      function Counter() {
        const [count, increaseCount, decreaseCount] = useCount();

        return (
          <div>
            <button onClick={() => increaseCount()}>+</button>
            <button onClick={() => decreaseCount()}>-</button>
            <span>Current count: {count}</span>
          </div>
        );
      }

      function Textbox() {
        const [text, setText] = useText();

        useEffect(() => {
          // componentDidMount (no componentDidUpdate because of the `[]` argument)
          const timerId = setTimeout(() => {
            setText("Done!");
          }, 1000);

          // componentDidUnmount
          return () => {
            clearTimeout(timerId);
          };
        }, []);

        return (
          <div>
            <input
              onChange={e => setText(e.target.value)}
              type="text"
              value={text}
            />
            <span>Current text: {text}</span>
          </div>
        );
      }

      function App() {
        const [count] = useCount();

        return (
          <Fragment>
            <Counter />
            {count !== 1 ? <Textbox /> : null}
          </Fragment>
        );
      }

      //
      // React component that uses redux provider
      function Root() {
        return (
          <Provider store={store}>
            <App />
          </Provider>
        );
      }

      //
      // React bootstrap
      render(createElement(Root), document.querySelector("#app"));
    </script>
  </body>
</html>