alexmochu

import { combineReducers } from '@reduxjs/toolkit'

import clicksReducer from './counter'

const clicks = { count: clicksReducer }

export let rootReducer = combineReducers({
  ...clicks
})

alexmochu

import { configureStore, getDefaultMiddleware } from '@reduxjs/toolkit'
import createSagaMiddleware from 'redux-saga';
import { createInjectorsEnhancer } from 'redux-injectors';

import createReducer from './rootReducer'
import rootSaga from './sagas'

export default function configureAppStore(initialState = {}) {
  const reduxSagaMonitorOptions = {};
  const sagaMiddleware = createSagaMiddleware(reduxSagaMonitorOptions);

alexmochu

import { createSlice, PayloadAction } from '@reduxjs/toolkit';

type CurrentDisplayState = {
  clicks: number
}

let initialState: CurrentDisplayState = {
  clicks: 0,
}

alexmochu

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,

alexmochu

{
  "package": {
    "dependencies": {
      "react-redux": "^7.2.0",
      "redux": "^4.0.5",
      "redux-devtools-extension": "^2.13.8",
      "redux-saga": "^1.1.3"
    },
    "scripts": {
      "serve": "serve -s build",

alexmochu

.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
  color: rgb(112, 76, 182);
}

alexmochu

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import logo from './logo.svg';
import increment, { incrementAsync, decrement } from './actions';
import Counter from './Counter';
import './App.css';

function App() {
  const dispatch = useDispatch();
  const counter = useSelector(state => state.count)

alexmochu

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import './index.css';
import configureStore from './store'
import App from './App';
import * as serviceWorker from './serviceWorker';

const store = configureStore();

alexmochu

import React from 'react';
import './App.css';

const Counter = ({ value, onIncrement, onDecrement, onIncrementAsync }) =>
<div>
  <button onClick={onIncrementAsync} className="button">
    Increment after 1 second
  </button>
  {' '}
  <button onClick={onIncrement} className="button">

alexmochu

import { all, call, delay, put, takeEvery } from 'redux-saga/effects'

export function* incrementAsync() {
  yield delay(1000)
  yield put({type: 'INCREMENT'})
}

export function* watchIncrementAsync() {
  yield takeEvery('INCREMENT_ASYNC', incrementAsync)
}