Skip to content

Commit

Permalink
Add typetest for typical typed hooks usage
Browse files Browse the repository at this point in the history
  • Loading branch information
markerikson committed Oct 3, 2021
1 parent 4a1857c commit e729165
Showing 1 changed file with 80 additions and 8 deletions.
88 changes: 80 additions & 8 deletions test/typetests/react-redux-types.typetest.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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<typeof counterStore.getState>
export type AppThunk<ReturnType = void> = ThunkAction<
ReturnType,
RootState,
unknown,
Action<string>
>

class Counter extends Component<any, any> {
render() {
Expand Down Expand Up @@ -402,3 +458,19 @@ namespace ConnectedPropsTest {
{} as PropsFromRedux2
)
}

// Standard hooks setup
export const useAppDispatch = () => useDispatch<AppDispatch>()
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector

function CounterComponent() {
const dispatch = useAppDispatch()

return (
<button
onClick={() => {
dispatch(incrementAsync(1))
}}
/>
)
}

0 comments on commit e729165

Please sign in to comment.