diff --git a/test/typetests/react-redux-types.typetest.tsx b/test/typetests/react-redux-types.typetest.tsx index 2b02b9ce8..515a1e4a8 100644 --- a/test/typetests/react-redux-types.typetest.tsx +++ b/test/typetests/react-redux-types.typetest.tsx @@ -2,21 +2,77 @@ import { Component, ReactElement } from 'react' import React from 'react' import ReactDOM from 'react-dom' -import { Store, Dispatch, bindActionCreators, AnyAction } from 'redux' -import { connect, Provider, ConnectedProps } from '../../src/index' +import { + configureStore, + createSlice, + createAsyncThunk, + Store, + Dispatch, + bindActionCreators, + AnyAction, + ThunkAction, + Action, +} from '@reduxjs/toolkit' +import { + connect, + Provider, + ConnectedProps, + useDispatch, + useSelector, + TypedUseSelectorHook, +} from '../../src/index' import { expectType } from '../typeTestHelpers' import objectAssign from 'object-assign' -// -// Quick Start -// https://github.com/rackt/react-redux/blob/master/docs/quick-start.md#quick-start -// - interface CounterState { counter: number } -declare var increment: Function + +const initialState: CounterState = { + counter: 0, +} + +const counterSlice = createSlice({ + name: 'counter', + initialState, + reducers: { + increment(state) { + state.counter++ + }, + }, +}) + +export function fetchCount(amount = 1) { + return new Promise<{ data: number }>((resolve) => + setTimeout(() => resolve({ data: amount }), 500) + ) +} + +export const incrementAsync = createAsyncThunk( + 'counter/fetchCount', + async (amount: number) => { + const response = await fetchCount(amount) + // The value we return becomes the `fulfilled` action payload + return response.data + } +) + +const { increment } = counterSlice.actions + +const counterStore = configureStore({ + reducer: counterSlice.reducer, + middleware: (gdm) => gdm(), +}) + +export type AppDispatch = typeof counterStore.dispatch +export type RootState = ReturnType +export type AppThunk = ThunkAction< + ReturnType, + RootState, + unknown, + Action +> class Counter extends Component { render() { @@ -402,3 +458,19 @@ namespace ConnectedPropsTest { {} as PropsFromRedux2 ) } + +// Standard hooks setup +export const useAppDispatch = () => useDispatch() +export const useAppSelector: TypedUseSelectorHook = useSelector + +function CounterComponent() { + const dispatch = useAppDispatch() + + return ( +