@reduxjs/toolkit#Reducer TypeScript Examples

monitoredSagaReducers: MonitoredSagaReducer = combineReducers(
  Object.keys(monitoredSagas).reduce(
    (acc: { [name: string]: Reducer<SagaState> }, sagaName: string) => {
      acc[sagaName] = monitoredSagas[sagaName].reducer
      return acc
    },
    {}
  )
)

describe('reducer', () => {
  it('should define app reducers', () => {
    const reducer = createReducer() as Reducer<any, any>
    const newState = reducer({ theme: { selected: 'dark' } }, '')
    expect(newState).toHaveProperty('account')
    expect(newState).toHaveProperty('createWallet')
    expect(newState).toHaveProperty('fatalError')
    expect(newState).toHaveProperty('ledger')
    expect(newState).toHaveProperty('network')
    expect(newState).toHaveProperty('openWallet')
    expect(newState).toHaveProperty('staking')
    expect(newState).toHaveProperty('theme')
    expect(newState).toHaveProperty('transaction')
    expect(newState).toHaveProperty('wallet')
  })
})

describe('reducer', () => {
  it('should inject reducers', () => {
    const dummyReducer = (s = {}, a) => 'dummyResult';
    const reducer = createReducer({ test: dummyReducer } as any) as Reducer<
      any,
      any
    >;
    const state = reducer({}, '');
    expect(state.test).toBe('dummyResult');
  });

  it('should return identity reducers when empty', () => {
    const reducer = createReducer() as Reducer<any, any>;
    const state = { a: 1 };
    const newState = reducer(state, '');
    expect(newState).toBe(state);
  });
});

describe('reducer', () => {
  it('should inject reducers', () => {
    const dummyReducer = () => 'dummyResult';
    const reducer = createReducer({ test: dummyReducer } as any) as Reducer<
      any,
      any
    >;
    const state = reducer({}, '');
    expect(state.test).toBe('dummyResult');
  });

  it('should return identity reducers when empty', () => {
    const reducer = createReducer() as Reducer<any, any>;
    const state = { a: 1 };
    const newState = reducer(state, '');
    expect(newState).toBe(state);
  });
});

private _initRedux() : void
    {
        const reducers: { [key : string ]: Reducer<any, Action> } = {};
        this._modules.forEach(x => { const ri = x.GetStateReducer(); if (ri) { reducers[ri.stateKey] = ri.reducer }});
        this._state = configureStore({ reducer: reducers });
        this._state.dispatch({ type: '@@EPI/INIT' });
    }

monitoredSagas: {
  [name: string]: { saga: any; reducer: Reducer<SagaState>; actions: SagaActions }
} = {
  [unlockWalletSagaName]: {
    saga: unlockWalletSaga,
    reducer: unlockWalletReducer,
    actions: unlockWalletActions,
  },
  [importAccountSagaName]: {
    saga: importAccountSaga,
    reducer: importAccountReducer,
    actions: importAccountActions,
  },
  [switchAccountSagaName]: {
    saga: switchAccountSaga,
    reducer: switchAccountReducer,
    actions: switchAccountActions,
  },
  [fetchBalancesSagaName]: {
    saga: fetchBalancesSaga,
    reducer: fetchBalancesReducer,
    actions: fetchBalancesActions,
  },
  [fetchFeedSagaName]: {
    saga: fetchFeedSaga,
    reducer: fetchFeedReducer,
    actions: fetchFeedActions,
  },
  [fetchExchangeRateSagaName]: {
    saga: fetchExchangeRateSaga,
    reducer: fetchExchangeRateReducer,
    actions: fetchExchangeRateActions,
  },
  [fetchTokenPriceSagaName]: {
    saga: fetchTokenPriceSaga,
    reducer: fetchTokenPriceReducer,
    actions: fetchTokenPriceActions,
  },
  [sendTokenSagaName]: {
    saga: sendTokenSaga,
    reducer: sendTokenReducer,
    actions: sendTokenActions,
  },
  [exchangeTokenSagaName]: {
    saga: exchangeTokenSaga,
    reducer: exchangeTokenReducer,
    actions: exchangeTokenActions,
  },
  [estimateFeeSagaName]: {
    saga: estimateFeeSaga,
    reducer: estimateFeeReducer,
    actions: estimateFeeActions,
  },
  [addTokenSagaName]: {
    saga: addTokenSaga,
    reducer: addTokenReducer,
    actions: addTokenActions,
  },
  [lockTokenSagaName]: {
    saga: lockTokenSaga,
    reducer: lockTokenReducer,
    actions: lockTokenActions,
  },
  [fetchValidatorsSagaName]: {
    saga: fetchValidatorsSaga,
    reducer: fetchValidatorsReducer,
    actions: fetchValidatorsActions,
  },
  [fetchStakeHistorySagaName]: {
    saga: fetchStakeHistorySaga,
    reducer: fetchStakeHistoryReducer,
    actions: fetchStakeHistoryActions,
  },
  [stakeTokenSagaName]: {
    saga: stakeTokenSaga,
    reducer: stakeTokenReducer,
    actions: stakeTokenActions,
  },
  [fetchProposalsSagaName]: {
    saga: fetchProposalsSaga,
    reducer: fetchProposalsReducer,
    actions: fetchProposalsActions,
  },
  [governanceVoteSagaName]: {
    saga: governanceVoteSaga,
    reducer: governanceVoteReducer,
    actions: governanceVoteActions,
  },
  [fetchNftsSagaName]: {
    saga: fetchNftsSaga,
    reducer: fetchNftsReducer,
    actions: fetchNftsActions,
  },
  [sendNftSagaName]: {
    saga: sendNftSaga,
    reducer: sendNftReducer,
    actions: sendNftActions,
  },
  [addNftContractSagaName]: {
    saga: addNftContractSaga,
    reducer: addNftContractReducer,
    actions: addNftContractActions,
  },
  [editAccountSagaName]: {
    saga: editAccountSaga,
    reducer: editAccountReducer,
    actions: editAccountActions,
  },
  [changePasswordSagaName]: {
    saga: changePasswordSaga,
    reducer: changePasswordReducer,
    actions: changePasswordActions,
  },
  [logoutSagaName]: {
    saga: logoutSaga,
    reducer: logoutReducer,
    actions: logoutActions,
  },
}

reduxTester = <State>(args?: ReduxTesterArguments<State>): ReduxTesterGiven<State> => {
  const dispatchedActions: AnyAction[] = [];
  const logActionsMiddleWare: Middleware<{}, Partial<StoreState>> = (
    store: MiddlewareAPI<Dispatch, Partial<StoreState>>
  ) => (next: Dispatch) => (action: AnyAction) => {
    // filter out thunk actions
    if (action && typeof action !== 'function') {
      dispatchedActions.push(action);
    }

    return next(action);
  };

  const preloadedState = args?.preloadedState ?? (({} as unknown) as State);
  const debug = args?.debug ?? false;
  let store: EnhancedStore<State> | null = null;

  const givenRootReducer = (rootReducer: Reducer<State>): ReduxTesterWhen<State> => {
    store = configureStore<State>({
      reducer: rootReducer,
      middleware: [logActionsMiddleWare, thunk],
      preloadedState,
    });
    setStore(store as any);

    return instance;
  };

  const whenActionIsDispatched = (
    action: any,
    clearPreviousActions?: boolean
  ): ReduxTesterWhen<State> & ReduxTesterThen<State> => {
    if (clearPreviousActions) {
      dispatchedActions.length = 0;
    }
    store.dispatch(action);

    return instance;
  };

  const whenAsyncActionIsDispatched = async (
    action: any,
    clearPreviousActions?: boolean
  ): Promise<ReduxTesterWhen<State> & ReduxTesterThen<State>> => {
    if (clearPreviousActions) {
      dispatchedActions.length = 0;
    }

    await store.dispatch(action);

    return instance;
  };

  const thenDispatchedActionShouldEqual = (...actions: AnyAction[]): ReduxTesterWhen<State> => {
    if (debug) {
      console.log('Dispatched Actions', JSON.stringify(dispatchedActions, null, 2));
    }

    if (!actions.length) {
      throw new Error('thenDispatchedActionShouldEqual has to be called with at least one action');
    }

    expect(dispatchedActions).toEqual(actions);
    return instance;
  };

  const thenDispatchedActionPredicateShouldEqual = (
    predicate: (dispatchedActions: AnyAction[]) => boolean
  ): ReduxTesterWhen<State> => {
    if (debug) {
      console.log('Dispatched Actions', JSON.stringify(dispatchedActions, null, 2));
    }

    expect(predicate(dispatchedActions)).toBe(true);
    return instance;
  };

  const instance = {
    givenRootReducer,
    whenActionIsDispatched,
    whenAsyncActionIsDispatched,
    thenDispatchedActionShouldEqual,
    thenDispatchedActionPredicateShouldEqual,
  };

  return instance;
}