PR: compare redux+hooks with main branch

README.md

@@ -7,6 +7,7 @@ Branches:
 
 | Name  | Description | Live |
 | ------------- | ------------- | ------------- |
-| **/main**  | Starter by [Dan Abramov](https://twitter.com/dan_abramov) rewritten with create-react-app  | [codepen](https://codepen.io/gaearon/pen/gWWZgR) |
+| [**/main**](https://github.com/GregoryNative/react-tutorial-tic-tac-toe/tree/main/src)  | Starter by [Dan Abramov](https://twitter.com/dan_abramov) rewritten with create-react-app  | [codepen](https://codepen.io/gaearon/pen/gWWZgR) |
+| [**/redux+hooks**](https://github.com/GregoryNative/react-tutorial-tic-tac-toe/tree/redux+hooks/src)  | Rewritten with [redux](https://redux.js.org) and hooks  | [stackblitz](https://stackblitz.com/edit/react-tictactoe-redux?file=src%2FApp.js) |
 
 

package.json

@@ -8,7 +8,10 @@
     "@testing-library/user-event": "^12.1.10",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-redux": "^7.2.4",
     "react-scripts": "4.0.3",
+    "redux": "^4.1.0",
+    "reselect": "^4.0.0",
     "web-vitals": "^1.0.1"
   },
   "scripts": {

src/App.js

@@ -1,9 +1,15 @@
+import { createStore } from 'redux';
+import { Provider } from 'react-redux';
+
 import Game from './components/Game';
+import reducers from './reducers';
+
+const store = createStore(reducers);
 
-function App() {
+export default function App() {
   return (
-    <Game />
+    <Provider store={store}>
+      <Game />
+    </Provider>
   );
 }
-
-export default App;

src/actions/game.js

@@ -0,0 +1,13 @@
+export const SET_STATE_TYPE = '@game/SET_STATE_TYPE';
+export const JUMP_TO_TYPE = '@game/JUMP_TO_TYPE';
+
+export const setState = ({ history, squares }) => ({
+  type: SET_STATE_TYPE,
+  history,
+  squares
+});
+
+export const jumpTo = step => ({
+  type: JUMP_TO_TYPE,
+  step
+});

src/components/Game.js

@@ -1,86 +1,78 @@
 import React from 'react';
+import { useSelector, useDispatch } from 'react-redux';
 
 import Board from './Board';
+
+import {
+  setState,
+  jumpTo as jumpToAction,
+} from '../actions/game';
+import {
+  getCurrent,
+  getHistory,
+  getStepNumber,
+  getWinner,
+  getXIsNext
+} from '../selectors/game';
 import calculateWinner from '../helpers/calculateWinner';
 
-class Game extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      history: [
-        {
-          squares: Array(9).fill(null)
-        }
-      ],
-      stepNumber: 0,
-      xIsNext: true
-    };
-  }
+function Game() {
+  const dispatch = useDispatch();
+
+  const history = useSelector(getHistory);
+  const current = useSelector(getCurrent);
+  const winner = useSelector(getWinner);
+  const stepNumber = useSelector(getStepNumber);
+  const xIsNext = useSelector(getXIsNext);
+
+  const handleClick = i => {
+    const nextHistory = history.slice(0, stepNumber + 1);
+    const nextCurrent = nextHistory[nextHistory.length - 1];
+    const nextSquares = nextCurrent.squares.slice();
 
-  handleClick(i) {
-    const history = this.state.history.slice(0, this.state.stepNumber + 1);
-    const current = history[history.length - 1];
-    const squares = current.squares.slice();
-    if (calculateWinner(squares) || squares[i]) {
+    if (calculateWinner(nextSquares) || nextSquares[i]) {
       return;
     }
-    squares[i] = this.state.xIsNext ? "X" : "O";
-    this.setState({
-      history: history.concat([
-        {
-          squares: squares
-        }
-      ]),
-      stepNumber: history.length,
-      xIsNext: !this.state.xIsNext
-    });
-  }
 
-  jumpTo(step) {
-    this.setState({
-      stepNumber: step,
-      xIsNext: (step % 2) === 0
-    });
-  }
+    nextSquares[i] = xIsNext ? 'X' : 'O';
 
-  render() {
-    const history = this.state.history;
-    const current = history[this.state.stepNumber];
-    const winner = calculateWinner(current.squares);
+    dispatch(setState({
+      history: nextHistory,
+      squares: nextSquares
+    }));
+  };
 
-    const moves = history.map((step, move) => {
-      const desc = move ?
-        'Go to move #' + move :
-        'Go to game start';
-      return (
-        <li key={move}>
-          <button onClick={() => this.jumpTo(move)}>{desc}</button>
-        </li>
-      );
-    });
-
-    let status;
-    if (winner) {
-      status = "Winner: " + winner;
-    } else {
-      status = "Next player: " + (this.state.xIsNext ? "X" : "O");
-    }
+  const jumpTo = step => {
+    dispatch(jumpToAction(step));
+  };
 
+  const moves = history.map((step, move) => {
+    const desc = move ? 'Go to move #' + move : 'Go to game start';
     return (
-      <div className="game">
-        <div className="game-board">
-          <Board
-            squares={current.squares}
-            onClick={i => this.handleClick(i)}
-          />
-        </div>
-        <div className="game-info">
-          <div>{status}</div>
-          <ol>{moves}</ol>
-        </div>
-      </div>
+      <li key={move}>
+        <button onClick={() => jumpTo(move)}>{desc}</button>
+      </li>
     );
+  });
+
+  let status;
+  if (winner) {
+    status = 'Winner: ' + winner;
+  } else {
+    status = 'Next player: ' + (xIsNext ? 'X' : 'O');
   }
+
+  return (
+    <div className="game">
+      <div className="game-board">
+        <Board squares={current.squares} onClick={i => handleClick(i)} />
+      </div>
+      <div className="game-info">
+        <div>{status}</div>
+        <ol>{moves}</ol>
+      </div>
+    </div>
+  );
 }
 
 export default Game;

src/reducers/game.js

@@ -0,0 +1,35 @@
+import { SET_STATE_TYPE, JUMP_TO_TYPE } from '../actions/game';
+
+const initialValues = {
+  history: [
+    {
+      squares: Array(9).fill(null)
+    }
+  ],
+  stepNumber: 0,
+  xIsNext: true
+};
+
+export default function gameReducer(state = initialValues, action) {
+  switch (action.type) {
+    case SET_STATE_TYPE:
+      return {
+        ...state,
+        history: action.history.concat([
+          {
+            squares: action.squares
+          }
+        ]),
+        stepNumber: action.history.length,
+        xIsNext: !state.xIsNext
+      };
+    case JUMP_TO_TYPE:
+      return {
+        ...state,
+        stepNumber: action.step,
+        xIsNext: action.step % 2 === 0
+      };
+    default:
+      return state;
+  }
+}

src/reducers/index.js

@@ -0,0 +1,7 @@
+import { combineReducers } from 'redux';
+
+import gameReducer from './game';
+
+export default combineReducers({
+  game: gameReducer
+});

src/selectors/game.js

@@ -0,0 +1,17 @@
+import { createSelector } from 'reselect';
+
+import calculateWinner from '../helpers/calculateWinner';
+
+export const getHistory = state => state.game.history;
+export const getStepNumber = state => state.game.stepNumber;
+export const getXIsNext = state => state.game.xIsNext;
+export const getCurrent = createSelector(
+  [getHistory, getStepNumber],
+  (history, stepNumber) => {
+    return history[stepNumber];
+  }
+);
+export const getWinner = createSelector(
+  [getCurrent],
+  current => calculateWinner(current.squares)
+);