alexmochu

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

alexmochu

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

type CurrentDisplayState = {
  clicks: number
}

let initialState: CurrentDisplayState = {
  clicks: 0,
}

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 { combineReducers } from '@reduxjs/toolkit'

import clicksReducer from './counter'

const clicks = { count: clicksReducer }

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

alexmochu

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

export function* incrementAsync() {
  yield delay(1000)
  yield put(addCount(1))
}

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

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 initialState = {};
const store = configureStore(initialState);

alexmochu

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

interface ICounterProps {
  value?: number;
  onIncrement?: any;
  onDecrement?: any;
  onIncrementAsync?: any;
}
const Counter: React.FC<ICounterProps> =

alexmochu

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { RootState } from './rootReducer';
import logo from './logo.svg';
import Counter from './Counter';
import { addCount, minusCount } from './counter';
import './App.css';

export const incrementAsync = () => ({
  type: 'INCREMENT_ASYNC',

alexmochu

{
    "package": {
      "dependencies": {
        "@reduxjs/toolkit": "^1.4.0",
        "@types/node": "^12.0.0",
        "@types/react": "^16.9.0",
        "@types/react-dom": "^16.9.0",
        "@types/react-redux": "^7.1.9",
        "react-redux": "^7.2.0",
        "redux": "^4.0.5",

alexmochu

import { combineReducers } from '@reduxjs/toolkit'

import clicksReducer from './counter'

const clicks = { count: clicksReducer }

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