redux setup

actions.ts

import { INC } from './constants';

export const Inc = () => ({
  type: INC as typeof INC
})

export type Actions =
  | ReturnType<typeof Inc>

components.tsx

import React from 'react'
import { connect } from 'react-redux'

import { AppState } from './state';

export const ReduxComponent = connect(
  (state: AppState) => ({
    count: state.count
  }),
  (dispatch) => ({
    //
  }))((props: { count: number }) => <span>{props.count}</span>)

constants.ts

export const INC = "INC"

epics.ts

import { Observable, empty, interval } from "rxjs";
import { ActionsObservable, ofType, combineEpics, StateObservable } from "redux-observable";

import { switchMapTo, tap, mapTo, withLatestFrom } from "rxjs/operators";

import { Actions, Inc } from "./actions";
import { AppState } from "./state";


export const logIncEpic = (action$: ActionsObservable<Actions>, state$: StateObservable<AppState>) => action$.pipe(
  ofType("INC"),
  withLatestFrom(state$),
  tap(([action, state]) => console.log(action.type, state)),
  switchMapTo(empty()),
)

export const each5secEpic = (action$: ActionsObservable<Actions>) => interval(5000).pipe(
  mapTo(Inc())
)

export const rootEpic = combineEpics(
  logIncEpic,
  each5secEpic
)

reducers.ts

import { AppState } from './state';
import { Actions } from './actions';

const initialState: AppState = {
  count: 1
}

export const rootReducer = (state = initialState, action: Actions) => {
  switch(action.type) {
    case "INC":
      return { ...state, count: state.count + 1 }

    default:
      return state
  }
}

state.ts

export type AppState = {
  count: number
}

store.ts

import { createStore, applyMiddleware, Store } from 'redux'
import { composeWithDevTools } from 'redux-devtools-extension'
import thunk from 'redux-thunk'
import { createEpicMiddleware, EpicMiddleware } from 'redux-observable'

import { rootReducer } from './reducers'
import { rootEpic } from './epics'
const epicMiddleware: EpicMiddleware<Actions, Actions, AppState> = createEpicMiddleware();

const middleware = [thunk, epicMiddleware]

import { AppState } from './state';
import { Actions } from './actions';

const composeEnhancers = composeWithDevTools({
  name: "IT Corpo React App"
});

export const getStore = (): Store<AppState> => {
  const store = createStore(rootReducer, composeEnhancers(
    applyMiddleware(...middleware),
    // other store enhancers...
  ))

  epicMiddleware.run(rootEpic);

  return store;
}

wejdź do głównego folderu projektu (itcorpo-react-app)

npm i redux react-redux redux-devtools-extension redux-observable redux-thunk @types/react-redux
git clone https://gist.github.com/ducin/f8d4b1fffcc84c1bf16876dd8b6876d9 src/store
rm -rf src/store/.git # aby git nie robił submodules

(ostatnia komenda zakłada że masz unixowego basha (lub git basha, jeśli jesteś na windowsie)