Redux example

README.md

@@ -283,7 +283,6 @@
 
 [Pull request](https://github.com/nickovchinnikov/minesweeper/pull/50/files)
 
-
 ## Redux intro
 
 ### Pure functions benifits
@@ -292,5 +291,10 @@
 
 [Pull request](https://github.com/nickovchinnikov/minesweeper/pull/51/files)
 
-### 
-### Redux basic example
+### Referential transparency
+
+[Pull request](https://github.com/nickovchinnikov/minesweeper/pull/52/files)
+
+### Redux basic example
+
+[Pull request](https://github.com/nickovchinnikov/minesweeper/pull/53/files)

examples/Redux/ClickCounter.test.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { render, fireEvent, screen } from '@testing-library/react';
+
+import { ClickCounterBasic } from './ClickCounterBasic';
+
+describe('ClickCounterBasic component test', () => {
+  it('should use custom step when incrementing', async () => {
+    render(<ClickCounterBasic />);
+    const decButton = screen.getByTestId('dec');
+    const incButton = screen.getByTestId('inc');
+    const count = screen.getByTestId('count');
+
+    expect(count).toHaveTextContent('Count: 0');
+
+    fireEvent.click(incButton);
+
+    expect(count).toHaveTextContent('Count: 1');
+
+    fireEvent.click(decButton);
+
+    expect(count).toHaveTextContent('Count: 0');
+  });
+});

examples/Redux/ClickCounterBasic.tsx

@@ -0,0 +1,19 @@
+import React, { FC, useReducer } from 'react';
+
+import { reducer, initialState, increment, decrement } from './counter';
+
+export const ClickCounterBasic: FC = () => {
+  const [state, dispatch] = useReducer(reducer, initialState);
+
+  return (
+    <>
+      <div data-testid="count">Count: {state}</div>
+      <button data-testid="dec" onClick={() => dispatch(decrement())}>
+        -
+      </button>
+      <button data-testid="inc" onClick={() => dispatch(increment())}>
+        +
+      </button>
+    </>
+  );
+};

examples/Redux/counter.test.ts

@@ -0,0 +1,10 @@
+import { initialState, reducer, increment, decrement } from './counter';
+
+describe('Counter redux module test', () => {
+  it('Default init with increment action', async () => {
+    expect(reducer(initialState, increment())).toBe(1);
+  });
+  it('Init with value decrement action', async () => {
+    expect(reducer(10, decrement())).toBe(9);
+  });
+});

examples/Redux/counter.ts

@@ -0,0 +1,22 @@
+interface Action {
+  type: string;
+}
+
+export const initialState = 0;
+
+const INCREMENT = 'examples/Redux/counter/increment';
+const DECREMENT = 'examples/Redux/counter/decrement';
+
+export function reducer(state: number, action: Action): number {
+  switch (action.type) {
+    case INCREMENT:
+      return state + 1;
+    case DECREMENT:
+      return state - 1;
+    default:
+      throw new Error();
+  }
+}
+
+export const increment = (): Action => ({ type: INCREMENT });
+export const decrement = (): Action => ({ type: DECREMENT });

examples/Redux/counterSlice.test.ts

@@ -0,0 +1,10 @@
+import { reducer, actions, initialState } from './counterSlice';
+
+describe('Counter redux module test', () => {
+  it('Default init with increment action', async () => {
+    expect(reducer(initialState, actions.increment())).toBe(1);
+  });
+  it('Init with value decrement action', async () => {
+    expect(reducer(10, actions.decrement())).toBe(9);
+  });
+});

examples/Redux/counterSlice.ts

@@ -0,0 +1,14 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+export const initialState = 0;
+
+const { reducer, actions } = createSlice({
+  name: 'counter',
+  initialState,
+  reducers: {
+    increment: (state) => state + 1,
+    decrement: (state) => state - 1,
+  },
+});
+
+export { reducer, actions };

package.json

@@ -85,6 +85,6 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-router-dom": "^5.3.0",
-    "redux": "^4.1.1"
+    "@reduxjs/toolkit": "^1.6.2"
   }
 }