counter-example

This commit is contained in:
Nathan Bierema 2024-08-05 22:13:52 -04:00
parent 6ba4082b23
commit ddd2aac69c
4 changed files with 26 additions and 17 deletions

View File

@ -1,9 +1,14 @@
import { combineReducers } from 'redux'; import { combineReducers, Reducer } from 'redux';
import counter from './counter'; import counter from './counter';
import { CounterAction } from '../actions/CounterActions';
const rootReducer = combineReducers({ const rootReducer: Reducer<
CounterState,
CounterAction,
Partial<CounterState>
> = combineReducers({
counter, counter,
}); }) as any;
export interface CounterState { export interface CounterState {
counter: number; counter: number;

View File

@ -2,34 +2,40 @@ import {
createStore, createStore,
applyMiddleware, applyMiddleware,
compose, compose,
PreloadedState,
Reducer, Reducer,
StoreEnhancer,
Middleware,
} from 'redux'; } from 'redux';
import { persistState } from '@redux-devtools/core'; import { persistState } from '@redux-devtools/core';
import thunk from 'redux-thunk'; import thunk from 'redux-thunk';
import rootReducer, { CounterState } from '../reducers'; import rootReducer, { CounterState } from '../reducers';
import DevTools from '../containers/DevTools'; import DevTools from '../containers/DevTools';
import { CounterAction } from '../actions/CounterActions';
function getDebugSessionKey() { function getDebugSessionKey() {
const matches = /[?&]debug_session=([^&#]+)\b/.exec(window.location.href); const matches = /[?&]debug_session=([^&#]+)\b/.exec(window.location.href);
return matches && matches.length > 0 ? matches[1] : null; return matches && matches.length > 0 ? matches[1] : null;
} }
const enhancer = compose( const enhancer: StoreEnhancer = compose(
applyMiddleware(thunk), applyMiddleware(thunk as unknown as Middleware),
DevTools.instrument(), DevTools.instrument(),
persistState(getDebugSessionKey()), persistState(getDebugSessionKey()),
); );
export default function configureStore( export default function configureStore(initialState?: Partial<CounterState>) {
initialState?: PreloadedState<CounterState>,
) {
const store = createStore(rootReducer, initialState, enhancer); const store = createStore(rootReducer, initialState, enhancer);
if (module.hot) { if (module.hot) {
module.hot.accept('../reducers', () => module.hot.accept('../reducers', () =>
// eslint-disable-next-line @typescript-eslint/no-require-imports // eslint-disable-next-line @typescript-eslint/no-require-imports
store.replaceReducer(require('../reducers').default as Reducer), store.replaceReducer(
require('../reducers').default as Reducer<
CounterState,
CounterAction,
Partial<CounterState>
>,
),
); );
} }

View File

@ -1,11 +1,9 @@
import { createStore, applyMiddleware, PreloadedState } from 'redux'; import { createStore, applyMiddleware, Middleware } from 'redux';
import thunk from 'redux-thunk'; import thunk from 'redux-thunk';
import rootReducer, { CounterState } from '../reducers'; import rootReducer, { CounterState } from '../reducers';
const enhancer = applyMiddleware(thunk); const enhancer = applyMiddleware(thunk as unknown as Middleware);
export default function configureStore( export default function configureStore(initialState?: Partial<CounterState>) {
initialState?: PreloadedState<CounterState>,
) {
return createStore(rootReducer, initialState, enhancer); return createStore(rootReducer, initialState, enhancer);
} }

View File

@ -1,9 +1,9 @@
import { PreloadedState, Store } from 'redux'; import { Store } from 'redux';
import { CounterState } from '../reducers'; import { CounterState } from '../reducers';
import { CounterAction } from '../actions/CounterActions'; import { CounterAction } from '../actions/CounterActions';
const configureStore: ( const configureStore: (
initialState?: PreloadedState<CounterState>, initialState?: Partial<CounterState>,
) => Store<CounterState, CounterAction> = ) => Store<CounterState, CounterAction> =
process.env.NODE_ENV === 'production' process.env.NODE_ENV === 'production'
? // eslint-disable-next-line @typescript-eslint/no-require-imports ? // eslint-disable-next-line @typescript-eslint/no-require-imports