mirror of
https://github.com/gosticks/DefinitelyTyped.git
synced 2025-10-16 12:05:41 +00:00
1453 lines
40 KiB
TypeScript
1453 lines
40 KiB
TypeScript
import * as React from 'react';
|
|
import * as ReactDOM from 'react-dom';
|
|
import {
|
|
Store,
|
|
Dispatch,
|
|
AnyAction,
|
|
ActionCreator,
|
|
createStore,
|
|
bindActionCreators,
|
|
ActionCreatorsMapObject,
|
|
Reducer,
|
|
} from 'redux';
|
|
import {
|
|
Connect,
|
|
connect,
|
|
ConnectedProps,
|
|
Provider,
|
|
DispatchProp,
|
|
MapStateToProps,
|
|
Options,
|
|
ReactReduxContext,
|
|
ReactReduxContextValue,
|
|
Selector,
|
|
shallowEqual,
|
|
MapDispatchToProps,
|
|
useDispatch,
|
|
useSelector,
|
|
useStore,
|
|
TypedUseSelectorHook,
|
|
} from 'react-redux';
|
|
import objectAssign = require('object-assign');
|
|
|
|
//
|
|
// Quick Start
|
|
// https://github.com/rackt/react-redux/blob/master/docs/quick-start.md#quick-start
|
|
//
|
|
|
|
// Test cases written in a way to isolate types and variables and verify the
|
|
// output of `connect` to make sure the signature is what is expected
|
|
|
|
function Empty() {
|
|
interface OwnProps {
|
|
dispatch: Dispatch;
|
|
foo: string;
|
|
}
|
|
|
|
class TestComponent extends React.Component<OwnProps> { }
|
|
|
|
const Test = connect()(TestComponent);
|
|
|
|
const verify = <Test foo='bar' />;
|
|
}
|
|
|
|
function MapState() {
|
|
interface OwnProps { foo: string; }
|
|
interface StateProps { bar: number; }
|
|
|
|
class TestComponent extends React.Component<OwnProps & StateProps> { }
|
|
|
|
const mapStateToProps = (_: any) => ({
|
|
bar: 1
|
|
});
|
|
|
|
const Test = connect(
|
|
mapStateToProps
|
|
)(TestComponent);
|
|
|
|
const verify = <Test foo='bar' />;
|
|
}
|
|
|
|
function MapStateWithDispatchProp() {
|
|
interface OwnProps { foo: string; }
|
|
interface StateProps { bar: number; dispatch: Dispatch; }
|
|
|
|
class TestComponent extends React.Component<OwnProps & StateProps> { }
|
|
|
|
const mapStateToProps = (_: any) => ({
|
|
bar: 1
|
|
});
|
|
|
|
const Test = connect(
|
|
mapStateToProps
|
|
)(TestComponent);
|
|
|
|
const verify = <Test foo='bar' />;
|
|
}
|
|
|
|
function MapStateFactory() {
|
|
interface OwnProps { foo: string; }
|
|
interface StateProps { bar: number; }
|
|
|
|
class TestComponent extends React.Component<OwnProps & StateProps> { }
|
|
|
|
const mapStateToProps = () => () => ({
|
|
bar: 1
|
|
});
|
|
|
|
const Test = connect(
|
|
mapStateToProps
|
|
)(TestComponent);
|
|
|
|
const verify = <Test foo='bar' />;
|
|
}
|
|
|
|
function MapDispatch() {
|
|
interface OwnProps { foo: string; }
|
|
interface DispatchProps { onClick: () => void; }
|
|
|
|
class TestComponent extends React.Component<OwnProps & DispatchProps> { }
|
|
|
|
const mapDispatchToProps = ({ onClick: () => { } });
|
|
|
|
const TestNull = connect(
|
|
null,
|
|
mapDispatchToProps,
|
|
)(TestComponent);
|
|
|
|
const verifyNull = <TestNull foo='bar' />;
|
|
|
|
const TestUndefined = connect(
|
|
undefined,
|
|
mapDispatchToProps,
|
|
)(TestComponent);
|
|
|
|
const verifyUndefined = <TestUndefined foo='bar' />;
|
|
}
|
|
|
|
function MapDispatchUnion() {
|
|
interface OwnProps { foo: string; }
|
|
interface DispatchProps { onClick: () => void; }
|
|
|
|
class TestComponent extends React.Component<OwnProps & DispatchProps> { }
|
|
|
|
// We deliberately cast the right-hand side to `any` because otherwise
|
|
// TypeScript would maintain the literal value, when we deliberately want to
|
|
// test the union type here (as per the annotation). See
|
|
// https://github.com/Microsoft/TypeScript/issues/30310#issuecomment-472218182.
|
|
const mapDispatchToProps: MapDispatchToProps<DispatchProps, OwnProps> = {} as any;
|
|
|
|
const TestNull = connect(
|
|
null,
|
|
mapDispatchToProps,
|
|
)(TestComponent);
|
|
|
|
const verifyNull = <TestNull foo='bar' />;
|
|
|
|
const TestUndefined = connect(
|
|
undefined,
|
|
mapDispatchToProps,
|
|
)(TestComponent);
|
|
|
|
const verifyUndefined = <TestUndefined foo='bar' />;
|
|
}
|
|
|
|
function MapDispatchWithThunkActionCreators() {
|
|
const simpleAction = (payload: boolean) => ({
|
|
type: 'SIMPLE_ACTION',
|
|
payload,
|
|
});
|
|
const thunkAction = (param1: number, param2: string) => (
|
|
async (dispatch: Dispatch, { foo }: OwnProps) => {
|
|
return foo;
|
|
}
|
|
);
|
|
interface OwnProps {
|
|
foo: string;
|
|
}
|
|
interface TestComponentProps extends OwnProps {
|
|
simpleAction: typeof simpleAction;
|
|
thunkAction(param1: number, param2: string): Promise<string>;
|
|
}
|
|
class TestComponent extends React.Component<TestComponentProps> { }
|
|
|
|
const mapStateToProps = ({ foo }: { foo: string }) => ({ foo });
|
|
const mapDispatchToProps = { simpleAction, thunkAction };
|
|
|
|
const Test1 = connect(null, mapDispatchToProps)(TestComponent);
|
|
const Test2 = connect(mapStateToProps, mapDispatchToProps)(TestComponent);
|
|
const Test3 = connect(
|
|
null, mapDispatchToProps, null, { storeKey: 'somekey' }
|
|
)(TestComponent);
|
|
const Test4 = connect(
|
|
mapStateToProps, mapDispatchToProps, null, { storeKey: 'somekey' }
|
|
)(TestComponent);
|
|
const verify = <div>
|
|
<Test1 foo='bar' />;
|
|
<Test2 />
|
|
<Test3 foo='bar' />;
|
|
<Test4 />
|
|
</div>;
|
|
}
|
|
|
|
function MapManualDispatchThatLooksLikeThunk() {
|
|
interface OwnProps {
|
|
foo: string;
|
|
}
|
|
interface TestComponentProps extends OwnProps {
|
|
remove: (item: string) => () => object;
|
|
}
|
|
class TestComponent extends React.Component<TestComponentProps> {
|
|
render() {
|
|
return <div onClick={this.props.remove('someid')} />;
|
|
}
|
|
}
|
|
|
|
const mapStateToProps = ({ foo }: { foo: string }) => ({ foo });
|
|
function mapDispatchToProps(dispatch: Dispatch) {
|
|
return {
|
|
remove(item: string) {
|
|
return () => dispatch({ type: 'REMOVE_ITEM', item });
|
|
}
|
|
};
|
|
}
|
|
|
|
const Test1 = connect(null, mapDispatchToProps)(TestComponent);
|
|
const Test2 = connect(mapStateToProps, mapDispatchToProps)(TestComponent);
|
|
const Test3 = connect(
|
|
null, mapDispatchToProps, null, { storeKey: 'somekey' }
|
|
)(TestComponent);
|
|
const Test4 = connect(
|
|
mapStateToProps, mapDispatchToProps, null, { storeKey: 'somekey' }
|
|
)(TestComponent);
|
|
const verify = <div>
|
|
<Test1 foo='bar' />;
|
|
<Test2 />
|
|
<Test3 foo='bar' />;
|
|
<Test4 />
|
|
</div>;
|
|
}
|
|
|
|
function MapStateAndDispatchObject() {
|
|
interface ClickPayload { count: number; }
|
|
const onClick: ActionCreator<ClickPayload> = () => ({ count: 1 });
|
|
const dispatchToProps = {
|
|
onClick,
|
|
};
|
|
|
|
interface OwnProps { foo: string; }
|
|
interface StateProps { bar: number; }
|
|
interface DispatchProps { onClick: ActionCreator<ClickPayload>; }
|
|
|
|
const mapStateToProps = (_: any, __: OwnProps): StateProps => ({
|
|
bar: 1
|
|
});
|
|
|
|
class TestComponent extends React.Component<OwnProps & StateProps & DispatchProps> { }
|
|
|
|
const Test = connect(
|
|
mapStateToProps,
|
|
dispatchToProps,
|
|
)(TestComponent);
|
|
|
|
const verify = <Test foo='bar' />;
|
|
}
|
|
|
|
function MapDispatchFactory() {
|
|
interface OwnProps { foo: string; }
|
|
interface DispatchProps { onClick: () => void; }
|
|
|
|
class TestComponent extends React.Component<OwnProps & DispatchProps> { }
|
|
|
|
const mapDispatchToPropsFactory = () => () => ({
|
|
onClick: () => { }
|
|
});
|
|
|
|
const TestNull = connect(
|
|
null,
|
|
mapDispatchToPropsFactory,
|
|
)(TestComponent);
|
|
|
|
const verifyNull = <TestNull foo='bar' />;
|
|
|
|
const TestUndefined = connect(
|
|
undefined,
|
|
mapDispatchToPropsFactory,
|
|
)(TestComponent);
|
|
|
|
const verifyUndefined = <TestUndefined foo='bar' />;
|
|
}
|
|
|
|
function MapStateAndDispatch() {
|
|
interface OwnProps { foo: string; }
|
|
interface StateProps { bar: number; }
|
|
interface DispatchProps { onClick: () => void; }
|
|
|
|
class TestComponent extends React.Component<OwnProps & StateProps & DispatchProps> { }
|
|
|
|
const mapStateToProps = () => ({
|
|
bar: 1
|
|
});
|
|
|
|
const mapDispatchToProps = () => ({
|
|
onClick: () => { }
|
|
});
|
|
|
|
const Test = connect(
|
|
mapStateToProps,
|
|
mapDispatchToProps,
|
|
)(TestComponent);
|
|
|
|
const verify = <Test foo='bar' />;
|
|
}
|
|
|
|
function MapStateFactoryAndDispatch() {
|
|
interface OwnProps { foo: string; }
|
|
interface StateProps { bar: number; }
|
|
interface DispatchProps { onClick: () => void; }
|
|
|
|
const mapStateToPropsFactory = () => () => ({
|
|
bar: 1
|
|
});
|
|
|
|
const mapDispatchToProps = () => ({
|
|
onClick: () => { }
|
|
});
|
|
|
|
class TestComponent extends React.Component<OwnProps & StateProps & DispatchProps> { }
|
|
|
|
const Test = connect(
|
|
mapStateToPropsFactory,
|
|
mapDispatchToProps,
|
|
)(TestComponent);
|
|
|
|
const verify = <Test foo='bar' />;
|
|
}
|
|
|
|
function MapStateFactoryAndDispatchFactory() {
|
|
interface OwnProps { foo: string; }
|
|
interface StateProps { bar: number; }
|
|
interface DispatchProps { onClick: () => void; }
|
|
|
|
const mapStateToPropsFactory = () => () => ({
|
|
bar: 1
|
|
});
|
|
|
|
const mapDispatchToPropsFactory = () => () => ({
|
|
onClick: () => { }
|
|
});
|
|
|
|
class TestComponent extends React.Component<OwnProps & StateProps & DispatchProps> { }
|
|
|
|
const Test = connect(
|
|
mapStateToPropsFactory,
|
|
mapDispatchToPropsFactory,
|
|
)(TestComponent);
|
|
|
|
const verify = <Test foo='bar' />;
|
|
}
|
|
|
|
function MapStateAndDispatchAndMerge() {
|
|
interface OwnProps { foo: string; }
|
|
interface StateProps { bar: number; }
|
|
interface DispatchProps { onClick: () => void; }
|
|
|
|
class TestComponent extends React.Component<OwnProps & StateProps & DispatchProps> { }
|
|
|
|
const mapStateToProps = () => ({
|
|
bar: 1
|
|
});
|
|
|
|
const mapDispatchToProps = () => ({
|
|
onClick: () => { }
|
|
});
|
|
|
|
const mergeProps = (stateProps: StateProps, dispatchProps: DispatchProps) => (
|
|
{ ...stateProps, ...dispatchProps }
|
|
);
|
|
|
|
const Test = connect(
|
|
mapStateToProps,
|
|
mapDispatchToProps,
|
|
mergeProps,
|
|
)(TestComponent);
|
|
|
|
const verify = <Test foo='bar' />;
|
|
}
|
|
|
|
function MapStateAndOptions() {
|
|
interface State { state: string; }
|
|
interface OwnProps { foo: string; }
|
|
interface StateProps { bar: number; }
|
|
interface DispatchProps { dispatch: Dispatch; }
|
|
|
|
class TestComponent extends React.Component<OwnProps & StateProps & DispatchProps> { }
|
|
|
|
const mapStateToProps = (state: State) => ({
|
|
bar: 1
|
|
});
|
|
|
|
const areStatePropsEqual = (next: StateProps, current: StateProps) => true;
|
|
|
|
const Test = connect<StateProps, DispatchProps, OwnProps, State>(
|
|
mapStateToProps,
|
|
null,
|
|
null,
|
|
{
|
|
pure: true,
|
|
areStatePropsEqual,
|
|
}
|
|
)(TestComponent);
|
|
|
|
const verify = <Test foo='bar' />;
|
|
}
|
|
|
|
interface CounterState {
|
|
counter: number;
|
|
}
|
|
declare var increment: () => { type: string };
|
|
|
|
class Counter extends React.Component<any, any> {
|
|
render() {
|
|
return (
|
|
<button onClick={this.props.onIncrement}>
|
|
{this.props.value}
|
|
</button>
|
|
);
|
|
}
|
|
}
|
|
|
|
function mapStateToProps(state: CounterState) {
|
|
return {
|
|
value: state.counter
|
|
};
|
|
}
|
|
|
|
// Which action creators does it want to receive by props?
|
|
function mapDispatchToProps(dispatch: Dispatch) {
|
|
return {
|
|
onIncrement: () => dispatch(increment())
|
|
};
|
|
}
|
|
|
|
connect(
|
|
mapStateToProps,
|
|
mapDispatchToProps
|
|
)(Counter);
|
|
|
|
@connect(mapStateToProps)
|
|
class CounterContainer extends React.Component<any, any> {
|
|
}
|
|
|
|
// Ensure connect's first two arguments can be replaced by wrapper functions
|
|
interface CounterStateProps {
|
|
value: number;
|
|
}
|
|
interface CounterDispatchProps {
|
|
onIncrement: () => void;
|
|
}
|
|
// with higher order functions
|
|
connect<CounterStateProps, CounterDispatchProps, {}, CounterState>(
|
|
() => mapStateToProps,
|
|
() => mapDispatchToProps
|
|
)(Counter);
|
|
// with higher order functions using parameters
|
|
connect<CounterStateProps, CounterDispatchProps, {}, CounterState>(
|
|
(initialState: CounterState, ownProps) => mapStateToProps,
|
|
(dispatch: Dispatch, ownProps) => mapDispatchToProps
|
|
)(Counter);
|
|
// only first argument
|
|
connect<CounterStateProps, {}, {}, CounterState>(
|
|
() => mapStateToProps
|
|
)(Counter);
|
|
// wrap only one argument
|
|
connect<CounterStateProps, CounterDispatchProps, {}, CounterState>(
|
|
mapStateToProps,
|
|
() => mapDispatchToProps
|
|
)(Counter);
|
|
// with extra arguments
|
|
connect<CounterStateProps, CounterDispatchProps, {}, CounterStateProps & CounterDispatchProps, CounterState>(
|
|
() => mapStateToProps,
|
|
() => mapDispatchToProps,
|
|
(s: CounterStateProps, d: CounterDispatchProps) =>
|
|
objectAssign({}, s, d),
|
|
{ pure: true }
|
|
)(Counter);
|
|
|
|
class App extends React.Component<any, any> {
|
|
render() {
|
|
return null;
|
|
}
|
|
}
|
|
|
|
const targetEl = document.getElementById('root');
|
|
|
|
ReactDOM.render((
|
|
<Provider store={store}>
|
|
{() => <App />}
|
|
</Provider>
|
|
), targetEl);
|
|
|
|
//
|
|
// API
|
|
// https://github.com/rackt/react-redux/blob/master/docs/api.md
|
|
//
|
|
declare var store: Store<TodoState>;
|
|
class MyRootComponent extends React.Component<any, any> {
|
|
}
|
|
class TodoApp extends React.Component<any, any> { }
|
|
interface TodoState {
|
|
todos: string[] | string;
|
|
}
|
|
interface TodoProps {
|
|
userId: number;
|
|
}
|
|
interface DispatchProps {
|
|
addTodo(userId: number, text: string): void;
|
|
action: () => any;
|
|
}
|
|
declare var actionCreators: () => {
|
|
action: () => any;
|
|
};
|
|
declare var dispatchActionCreators: () => DispatchProps;
|
|
declare var addTodo: () => { type: string; };
|
|
declare var todoActionCreators: { [type: string]: (...args: any[]) => any; };
|
|
declare var counterActionCreators: { [type: string]: (...args: any[]) => any; };
|
|
|
|
ReactDOM.render(
|
|
<Provider store={store}>
|
|
{() => <MyRootComponent />}
|
|
</Provider>,
|
|
document.body
|
|
);
|
|
|
|
// Inject just dispatch and don't listen to store
|
|
|
|
const AppWrap = (props: DispatchProp & { children?: React.ReactNode }) => <div />;
|
|
const WrappedApp = connect()(AppWrap);
|
|
|
|
<WrappedApp />;
|
|
|
|
// Inject dispatch and every field in the global state
|
|
|
|
connect((state: TodoState) => state)(TodoApp);
|
|
|
|
// Inject dispatch and todos
|
|
|
|
function mapStateToProps2(state: TodoState) {
|
|
return { todos: state.todos };
|
|
}
|
|
|
|
export default connect(mapStateToProps2)(TodoApp);
|
|
|
|
connect(mapStateToProps2, actionCreators)(TodoApp);
|
|
|
|
function mapDispatchToProps2(dispatch: Dispatch) {
|
|
return { actions: bindActionCreators(actionCreators, dispatch) };
|
|
}
|
|
|
|
connect(mapStateToProps2, mapDispatchToProps2)(TodoApp);
|
|
|
|
// Inject todos and a specific action creator (addTodo)
|
|
|
|
function mapDispatchToProps3(dispatch: Dispatch) {
|
|
return bindActionCreators({ addTodo }, dispatch);
|
|
}
|
|
|
|
connect(mapStateToProps2, mapDispatchToProps3)(TodoApp);
|
|
|
|
// Inject todos, todoActionCreators as todoActions, and counterActionCreators as counterActions
|
|
|
|
function mapDispatchToProps4(dispatch: Dispatch) {
|
|
return {
|
|
todoActions: bindActionCreators(todoActionCreators, dispatch),
|
|
counterActions: bindActionCreators(counterActionCreators, dispatch)
|
|
};
|
|
}
|
|
|
|
connect(mapStateToProps2, mapDispatchToProps4)(TodoApp);
|
|
|
|
// Inject todos, and todoActionCreators and counterActionCreators together as actions
|
|
|
|
function mapDispatchToProps5(dispatch: Dispatch) {
|
|
return {
|
|
actions: bindActionCreators(objectAssign({}, todoActionCreators, counterActionCreators), dispatch)
|
|
};
|
|
}
|
|
|
|
connect(mapStateToProps2, mapDispatchToProps5)(TodoApp);
|
|
|
|
// Inject todos, and all todoActionCreators and counterActionCreators directly as props
|
|
|
|
function mapDispatchToProps6(dispatch: Dispatch) {
|
|
return bindActionCreators(objectAssign({}, todoActionCreators, counterActionCreators), dispatch);
|
|
}
|
|
|
|
connect(mapStateToProps2, mapDispatchToProps6)(TodoApp);
|
|
|
|
// Inject todos of a specific user depending on props
|
|
|
|
function mapStateToProps3(state: TodoState, ownProps: TodoProps): TodoState {
|
|
return { todos: state.todos[ownProps.userId] };
|
|
}
|
|
|
|
connect(mapStateToProps3)(TodoApp);
|
|
|
|
// Inject todos of a specific user depending on props, and inject props.userId into the action
|
|
|
|
function mergeProps(stateProps: TodoState, dispatchProps: DispatchProps, ownProps: TodoProps): DispatchProps & TodoState & TodoProps {
|
|
return objectAssign({}, ownProps, dispatchProps, {
|
|
todos: stateProps.todos[ownProps.userId],
|
|
addTodo: (text: string) => dispatchProps.addTodo(ownProps.userId, text)
|
|
});
|
|
}
|
|
|
|
connect(mapStateToProps2, dispatchActionCreators, mergeProps)(MyRootComponent);
|
|
|
|
// https://github.com/DefinitelyTyped/DefinitelyTyped/issues/14622#issuecomment-279820358
|
|
// Allow for undefined mapStateToProps
|
|
connect(undefined, mapDispatchToProps6)(TodoApp);
|
|
|
|
interface TestProp {
|
|
property1: number;
|
|
someOtherProperty?: string;
|
|
}
|
|
interface TestState {
|
|
isLoaded: boolean;
|
|
state1: number;
|
|
}
|
|
class TestComponent extends React.Component<TestProp & DispatchProp, TestState> { }
|
|
const WrappedTestComponent = connect()(TestComponent);
|
|
|
|
// return value of the connect()(TestComponent) is assignable to a ComponentClass<TestProp>
|
|
// ie: DispatchProp has been removed through decoration
|
|
const ADecoratedTestComponent: React.ComponentClass<TestProp> = WrappedTestComponent;
|
|
<WrappedTestComponent property1={42} />;
|
|
|
|
const ATestComponent: React.ComponentClass<TestProp> = TestComponent; // $ExpectError
|
|
|
|
// stateless functions
|
|
interface HelloMessageProps {
|
|
dispatch: Dispatch;
|
|
name: string;
|
|
}
|
|
const HelloMessage: React.StatelessComponent<HelloMessageProps> = (props) => {
|
|
return <div>Hello {props.name}</div>;
|
|
};
|
|
const ConnectedHelloMessage = connect()(HelloMessage);
|
|
ReactDOM.render(<ConnectedHelloMessage name="Sebastian" />, document.getElementById('content'));
|
|
|
|
// stateless functions that uses mapStateToProps and mapDispatchToProps
|
|
function TestStatelessFunctionWithMapArguments() {
|
|
interface GreetingProps {
|
|
name: string;
|
|
onClick: () => void;
|
|
}
|
|
|
|
function Greeting(props: GreetingProps) {
|
|
return <div>Hello {props.name}</div>;
|
|
}
|
|
|
|
const mapStateToProps = (state: any, ownProps: GreetingProps) => {
|
|
return {
|
|
name: 'Connected! ' + ownProps.name
|
|
};
|
|
};
|
|
|
|
const mapDispatchToProps = (dispatch: Dispatch, ownProps: GreetingProps) => {
|
|
return {
|
|
onClick: () => {
|
|
dispatch({ type: 'GREETING', name: ownProps.name });
|
|
}
|
|
};
|
|
};
|
|
|
|
const ConnectedGreeting = connect(
|
|
mapStateToProps,
|
|
mapDispatchToProps
|
|
)(Greeting);
|
|
}
|
|
|
|
// https://github.com/DefinitelyTyped/DefinitelyTyped/issues/8787
|
|
function TestTOwnPropsInference() {
|
|
interface OwnProps {
|
|
own: string;
|
|
}
|
|
|
|
interface StateProps {
|
|
state: string;
|
|
}
|
|
|
|
class OwnPropsComponent extends React.Component<StateProps & OwnProps & DispatchProp> {
|
|
render() {
|
|
return <div />;
|
|
}
|
|
}
|
|
|
|
function mapStateToPropsWithoutOwnProps(state: any): StateProps {
|
|
return { state: 'string' };
|
|
}
|
|
|
|
function mapStateToPropsWithOwnProps(state: any, ownProps: OwnProps): StateProps {
|
|
return { state: 'string' };
|
|
}
|
|
|
|
const ConnectedWithoutOwnProps = connect(mapStateToPropsWithoutOwnProps)(OwnPropsComponent);
|
|
const ConnectedWithOwnProps = connect(mapStateToPropsWithOwnProps)(OwnPropsComponent);
|
|
const ConnectedWithTypeHint = connect<StateProps, void, OwnProps>(mapStateToPropsWithoutOwnProps)(OwnPropsComponent);
|
|
|
|
// This should not compile, which is good.
|
|
// React.createElement(ConnectedWithoutOwnProps, { anything: 'goes!' });
|
|
|
|
// This compiles, as expected.
|
|
React.createElement(ConnectedWithOwnProps, { own: 'string' });
|
|
|
|
// This should not compile, which is good.
|
|
// React.createElement(ConnectedWithOwnProps, { anything: 'goes!' });
|
|
|
|
// This compiles, as expected.
|
|
React.createElement(ConnectedWithTypeHint, { own: 'string' });
|
|
|
|
// This should not compile, which is good.
|
|
// React.createElement(ConnectedWithTypeHint, { anything: 'goes!' });
|
|
|
|
interface AllProps {
|
|
own: string;
|
|
state: string;
|
|
}
|
|
|
|
class AllPropsComponent extends React.Component<AllProps & DispatchProp> {
|
|
render() {
|
|
return <div />;
|
|
}
|
|
}
|
|
|
|
type PickedOwnProps = Pick<AllProps, "own">;
|
|
type PickedStateProps = Pick<AllProps, "state">;
|
|
|
|
const mapStateToPropsForPicked: MapStateToProps<PickedStateProps, PickedOwnProps, {}> = (state: any): PickedStateProps => {
|
|
return { state: "string" };
|
|
};
|
|
const ConnectedWithPickedOwnProps = connect(mapStateToPropsForPicked)(AllPropsComponent);
|
|
<ConnectedWithPickedOwnProps own="blah" />;
|
|
}
|
|
|
|
// https://github.com/DefinitelyTyped/DefinitelyTyped/issues/16021
|
|
function TestMergedPropsInference() {
|
|
interface StateProps {
|
|
state: string;
|
|
}
|
|
|
|
interface DispatchProps {
|
|
dispatch: string;
|
|
}
|
|
|
|
interface OwnProps {
|
|
own: string;
|
|
}
|
|
|
|
interface MergedProps {
|
|
merged: string;
|
|
}
|
|
|
|
class MergedPropsComponent extends React.Component<MergedProps> {
|
|
render() {
|
|
return <div />;
|
|
}
|
|
}
|
|
|
|
function mapStateToProps(state: any): StateProps {
|
|
return { state: 'string' };
|
|
}
|
|
|
|
function mapDispatchToProps(dispatch: Dispatch): DispatchProps {
|
|
return { dispatch: 'string' };
|
|
}
|
|
|
|
const ConnectedWithOwnAndState: React.ComponentClass<OwnProps> = connect<StateProps, void, OwnProps, MergedProps>(
|
|
mapStateToProps,
|
|
undefined,
|
|
(stateProps: StateProps) => ({
|
|
merged: "merged",
|
|
}),
|
|
)(MergedPropsComponent);
|
|
|
|
const ConnectedWithOwnAndDispatch: React.ComponentClass<OwnProps> = connect<void, DispatchProps, OwnProps, MergedProps>(
|
|
undefined,
|
|
mapDispatchToProps,
|
|
(stateProps: undefined, dispatchProps: DispatchProps) => ({
|
|
merged: "merged",
|
|
}),
|
|
)(MergedPropsComponent);
|
|
|
|
const ConnectedWithOwn: React.ComponentClass<OwnProps> = connect<void, void, OwnProps, MergedProps>(
|
|
undefined,
|
|
undefined,
|
|
() => ({
|
|
merged: "merged",
|
|
}),
|
|
)(MergedPropsComponent);
|
|
}
|
|
|
|
function Issue16652() {
|
|
interface PassedProps {
|
|
commentIds: string[];
|
|
}
|
|
|
|
interface GeneratedStateProps {
|
|
comments: Array<({ id: string } | undefined)>;
|
|
}
|
|
|
|
class CommentList extends React.Component<PassedProps & GeneratedStateProps & DispatchProp> { }
|
|
|
|
const mapStateToProps = (state: any, ownProps: PassedProps): GeneratedStateProps => {
|
|
return {
|
|
comments: ownProps.commentIds.map(id => ({ id })),
|
|
};
|
|
};
|
|
|
|
const ConnectedCommentList = connect<GeneratedStateProps, {}, PassedProps>(mapStateToProps)(
|
|
CommentList
|
|
);
|
|
|
|
<ConnectedCommentList commentIds={['a', 'b', 'c']} />;
|
|
}
|
|
|
|
function Issue15463() {
|
|
interface SpinnerProps {
|
|
showGlobalSpinner: boolean;
|
|
}
|
|
|
|
class SpinnerClass extends React.Component<SpinnerProps & DispatchProp> {
|
|
render() {
|
|
return (<div />);
|
|
}
|
|
}
|
|
|
|
const Spinner = connect((state: any) => {
|
|
return { showGlobalSpinner: true };
|
|
})(SpinnerClass);
|
|
|
|
<Spinner />;
|
|
}
|
|
|
|
function RemoveInjectedAndPassOnRest() {
|
|
interface TProps {
|
|
showGlobalSpinner: boolean;
|
|
foo: string;
|
|
}
|
|
class SpinnerClass extends React.Component<TProps & DispatchProp> {
|
|
render() {
|
|
return (<div />);
|
|
}
|
|
}
|
|
|
|
const Spinner = connect((state: any) => {
|
|
return { showGlobalSpinner: true };
|
|
})(SpinnerClass);
|
|
|
|
<Spinner foo='bar' />;
|
|
}
|
|
|
|
function TestControlledComponentWithoutDispatchProp() {
|
|
interface MyState {
|
|
count: number;
|
|
}
|
|
|
|
interface MyProps {
|
|
label: string;
|
|
// `dispatch` is optional, but setting it to anything
|
|
// other than Dispatch<T> will cause an error
|
|
//
|
|
// dispatch: Dispatch<any>; // OK
|
|
// dispatch: number; // ERROR
|
|
}
|
|
|
|
function mapStateToProps(state: MyState) {
|
|
return {
|
|
label: `The count is ${state.count}`,
|
|
};
|
|
}
|
|
|
|
class MyComponent extends React.Component<MyProps> {
|
|
render() {
|
|
return <span>{this.props.label}</span>;
|
|
}
|
|
}
|
|
|
|
const MyFuncComponent = (props: MyProps) => (
|
|
<span>{props.label}</span>
|
|
);
|
|
|
|
const MyControlledComponent = connect(mapStateToProps)(MyComponent);
|
|
const MyControlledFuncComponent = connect(mapStateToProps)(MyFuncComponent);
|
|
}
|
|
|
|
function TestDispatchToPropsAsObject() {
|
|
const onClick: ActionCreator<{}> = () => ({});
|
|
const mapStateToProps = (state: any) => {
|
|
return {
|
|
title: state.app.title as string,
|
|
};
|
|
};
|
|
const dispatchToProps = {
|
|
onClick,
|
|
};
|
|
|
|
type Props = { title: string; } & typeof dispatchToProps;
|
|
const HeaderComponent: React.StatelessComponent<Props> = (props) => {
|
|
return <h1>{props.title}</h1>;
|
|
};
|
|
|
|
const Header = connect(mapStateToProps, dispatchToProps)(HeaderComponent);
|
|
<Header />;
|
|
}
|
|
|
|
function TestInferredFunctionalComponentWithExplicitOwnProps() {
|
|
interface Props {
|
|
title: string;
|
|
extraText: string;
|
|
onClick: () => void;
|
|
}
|
|
|
|
const Header = connect(
|
|
(
|
|
{ app: { title } }: { app: { title: string } },
|
|
{ extraText }: { extraText: string }
|
|
) => ({
|
|
title,
|
|
extraText
|
|
}),
|
|
(dispatch) => ({
|
|
onClick: () => dispatch({ type: 'test' })
|
|
})
|
|
)(({ title, extraText, onClick }: Props) => {
|
|
return <h1 onClick={onClick}>{title} {extraText}</h1>;
|
|
});
|
|
<Header extraText='text' />;
|
|
}
|
|
|
|
function TestInferredFunctionalComponentWithImplicitOwnProps() {
|
|
interface Props {
|
|
title: string;
|
|
extraText: string;
|
|
onClick: () => void;
|
|
}
|
|
|
|
const Header = connect(
|
|
(
|
|
{ app: { title } }: { app: { title: string } },
|
|
) => ({
|
|
title,
|
|
}),
|
|
(dispatch) => ({
|
|
onClick: () => dispatch({ type: 'test' })
|
|
})
|
|
)(({ title, extraText, onClick }: Props) => {
|
|
return <h1 onClick={onClick}>{title} {extraText}</h1>;
|
|
});
|
|
<Header extraText='text' />;
|
|
}
|
|
|
|
function TestWrappedComponent() {
|
|
interface InnerProps {
|
|
name: string;
|
|
}
|
|
const Inner: React.StatelessComponent<InnerProps> = (props) => {
|
|
return <h1>{props.name}</h1>;
|
|
};
|
|
|
|
const mapStateToProps = (state: any) => {
|
|
return {
|
|
name: "Connected",
|
|
};
|
|
};
|
|
const Connected = connect(mapStateToProps)(Inner);
|
|
|
|
// `Inner` and `Connected.WrappedComponent` require explicit `name` prop
|
|
const TestInner = (props: any) => <Inner name="Inner" />;
|
|
const TestWrapped = (props: any) => <Connected.WrappedComponent name="Wrapped" />;
|
|
// `Connected` does not require explicit `name` prop
|
|
const TestConnected = (props: any) => <Connected />;
|
|
}
|
|
|
|
function TestWithoutTOwnPropsDecoratedInference() {
|
|
interface ForwardedProps {
|
|
forwarded: string;
|
|
}
|
|
|
|
interface OwnProps {
|
|
own: string;
|
|
}
|
|
|
|
interface StateProps {
|
|
state: string;
|
|
}
|
|
|
|
class WithoutOwnPropsComponentClass extends React.Component<ForwardedProps & StateProps & DispatchProp<any>> {
|
|
render() {
|
|
return <div />;
|
|
}
|
|
}
|
|
|
|
const WithoutOwnPropsComponentStateless: React.StatelessComponent<ForwardedProps & StateProps & DispatchProp<any>> = () => (<div />);
|
|
|
|
function mapStateToProps4(state: any, ownProps: OwnProps): StateProps {
|
|
return { state: 'string' };
|
|
}
|
|
|
|
// these decorations should compile, it is perfectly acceptable to receive props and ignore them
|
|
const ConnectedWithOwnPropsClass = connect(mapStateToProps4)(WithoutOwnPropsComponentClass);
|
|
const ConnectedWithOwnPropsStateless = connect(mapStateToProps4)(WithoutOwnPropsComponentStateless);
|
|
const ConnectedWithTypeHintClass = connect<StateProps, void, OwnProps>(mapStateToProps4)(WithoutOwnPropsComponentClass);
|
|
const ConnectedWithTypeHintStateless = connect<StateProps, void, OwnProps>(mapStateToProps4)(WithoutOwnPropsComponentStateless);
|
|
|
|
// This should compile
|
|
React.createElement(ConnectedWithOwnPropsClass, { own: 'string', forwarded: 'string' });
|
|
React.createElement(ConnectedWithOwnPropsClass, { own: 'string', forwarded: 'string' });
|
|
|
|
// This should not compile, it is missing ForwardedProps
|
|
React.createElement(ConnectedWithOwnPropsClass, { own: 'string' }); // $ExpectError
|
|
React.createElement(ConnectedWithOwnPropsStateless, { own: 'string' }); // $ExpectError
|
|
|
|
// This should compile
|
|
React.createElement(ConnectedWithOwnPropsClass, { own: 'string', forwarded: 'string' });
|
|
React.createElement(ConnectedWithOwnPropsStateless, { own: 'string', forwarded: 'string' });
|
|
|
|
// This should not compile, it is missing ForwardedProps
|
|
React.createElement(ConnectedWithTypeHintClass, { own: 'string' }); // $ExpectError
|
|
React.createElement(ConnectedWithTypeHintStateless, { own: 'string' }); // $ExpectError
|
|
|
|
interface AllProps {
|
|
own: string;
|
|
state: string;
|
|
}
|
|
|
|
class AllPropsComponent extends React.Component<AllProps & DispatchProp<any>> {
|
|
render() {
|
|
return <div />;
|
|
}
|
|
}
|
|
|
|
type PickedOwnProps = Pick<AllProps, "own">;
|
|
type PickedStateProps = Pick<AllProps, "state">;
|
|
|
|
const mapStateToPropsForPicked: MapStateToProps<PickedStateProps, PickedOwnProps, {}> = (state: any): PickedStateProps => {
|
|
return { state: "string" };
|
|
};
|
|
const ConnectedWithPickedOwnProps = connect(mapStateToPropsForPicked)(AllPropsComponent);
|
|
<ConnectedWithPickedOwnProps own="blah" />;
|
|
}
|
|
|
|
// https://github.com/DefinitelyTyped/DefinitelyTyped/issues/25321#issuecomment-387659500
|
|
function ProviderAcceptsStoreWithCustomAction() {
|
|
const reducer: Reducer<
|
|
{ foo: number } | undefined,
|
|
{ type: "foo"; payload: number }
|
|
> = state => state;
|
|
|
|
const store = createStore(reducer);
|
|
|
|
const Whatever = () => (
|
|
<Provider store={store}>
|
|
<div>Whatever</div>
|
|
</Provider>
|
|
);
|
|
}
|
|
|
|
function TestOptionalPropsMergedCorrectly() {
|
|
interface OptionalDecorationProps {
|
|
foo: string;
|
|
bar: number;
|
|
optionalProp?: boolean;
|
|
dependsOnDispatch?: () => void;
|
|
}
|
|
|
|
class Component extends React.Component<OptionalDecorationProps> {
|
|
render() {
|
|
return <div />;
|
|
}
|
|
}
|
|
|
|
interface MapStateProps {
|
|
foo: string;
|
|
bar: number;
|
|
optionalProp: boolean;
|
|
}
|
|
|
|
interface MapDispatchProps {
|
|
dependsOnDispatch: () => void;
|
|
}
|
|
|
|
function mapStateToProps(state: any): MapStateProps {
|
|
return {
|
|
foo: 'foo',
|
|
bar: 42,
|
|
optionalProp: true,
|
|
};
|
|
}
|
|
|
|
function mapDispatchToProps(dispatch: any): MapDispatchProps {
|
|
return {
|
|
dependsOnDispatch: () => { }
|
|
};
|
|
}
|
|
|
|
connect(mapStateToProps, mapDispatchToProps)(Component);
|
|
}
|
|
|
|
function TestMoreGeneralDecorationProps() {
|
|
// connect() should support decoration props that are more permissive
|
|
// than the injected props, as long as the injected props can satisfy
|
|
// the decoration props.
|
|
interface MoreGeneralDecorationProps {
|
|
foo: string | number;
|
|
bar: number | 'foo';
|
|
optionalProp?: boolean | object;
|
|
dependsOnDispatch?: () => void;
|
|
}
|
|
|
|
class Component extends React.Component<MoreGeneralDecorationProps> {
|
|
render() {
|
|
return <div />;
|
|
}
|
|
}
|
|
|
|
interface MapStateProps {
|
|
foo: string;
|
|
bar: number;
|
|
optionalProp: boolean;
|
|
}
|
|
|
|
interface MapDispatchProps {
|
|
dependsOnDispatch: () => void;
|
|
}
|
|
|
|
function mapStateToProps(state: any): MapStateProps {
|
|
return {
|
|
foo: 'foo',
|
|
bar: 42,
|
|
optionalProp: true,
|
|
};
|
|
}
|
|
|
|
function mapDispatchToProps(dispatch: any): MapDispatchProps {
|
|
return {
|
|
dependsOnDispatch: () => { }
|
|
};
|
|
}
|
|
|
|
connect(mapStateToProps, mapDispatchToProps)(Component);
|
|
}
|
|
|
|
function TestFailsMoreSpecificInjectedProps() {
|
|
interface MoreSpecificDecorationProps {
|
|
foo: string;
|
|
bar: number;
|
|
dependsOnDispatch: () => void;
|
|
}
|
|
|
|
class Component extends React.Component<MoreSpecificDecorationProps> {
|
|
render() {
|
|
return <div />;
|
|
}
|
|
}
|
|
|
|
interface MapStateProps {
|
|
foo: string | number;
|
|
bar: number | 'foo';
|
|
dependsOnDispatch?: () => void;
|
|
}
|
|
|
|
interface MapDispatchProps {
|
|
dependsOnDispatch?: () => void;
|
|
}
|
|
|
|
function mapStateToProps(state: any): MapStateProps {
|
|
return {
|
|
foo: 'foo',
|
|
bar: 42,
|
|
};
|
|
}
|
|
|
|
function mapDispatchToProps(dispatch: any): MapDispatchProps {
|
|
return {
|
|
dependsOnDispatch: () => { }
|
|
};
|
|
}
|
|
|
|
// Since it is possible the injected props could fail to satisfy the decoration props,
|
|
// the following line should fail to compile.
|
|
connect(mapStateToProps, mapDispatchToProps)(Component); // $ExpectError
|
|
|
|
// Confirm that this also fails with functional components
|
|
const FunctionalComponent = (props: MoreSpecificDecorationProps) => null;
|
|
connect(mapStateToProps, mapDispatchToProps)(Component); // $ExpectError
|
|
}
|
|
|
|
function TestLibraryManagedAttributes() {
|
|
interface OwnProps {
|
|
bar: number;
|
|
fn: () => void;
|
|
}
|
|
|
|
interface MapStateProps {
|
|
foo: string;
|
|
}
|
|
|
|
class Component extends React.Component<OwnProps & MapStateProps> {
|
|
static defaultProps = {
|
|
bar: 0,
|
|
};
|
|
|
|
render() {
|
|
return <div />;
|
|
}
|
|
}
|
|
|
|
function mapStateToProps(state: any): MapStateProps {
|
|
return {
|
|
foo: 'foo',
|
|
};
|
|
}
|
|
|
|
const ConnectedComponent = connect(mapStateToProps)(Component);
|
|
<ConnectedComponent fn={() => { }} />;
|
|
|
|
const ConnectedComponent2 = connect<MapStateProps, void, OwnProps>(mapStateToProps)(Component);
|
|
<ConnectedComponent2 fn={() => { }} />;
|
|
}
|
|
|
|
function TestNonReactStatics() {
|
|
interface OwnProps {
|
|
bar: number;
|
|
}
|
|
|
|
interface MapStateProps {
|
|
foo: string;
|
|
}
|
|
|
|
class Component extends React.Component<OwnProps & MapStateProps> {
|
|
static defaultProps = {
|
|
bar: 0,
|
|
};
|
|
|
|
static meaningOfLife = 42;
|
|
|
|
render() {
|
|
return <div />;
|
|
}
|
|
}
|
|
|
|
function mapStateToProps(state: any): MapStateProps {
|
|
return {
|
|
foo: 'foo',
|
|
};
|
|
}
|
|
|
|
Component.meaningOfLife;
|
|
Component.defaultProps.bar;
|
|
|
|
const ConnectedComponent = connect(mapStateToProps)(Component);
|
|
|
|
// This is a non-React static and should be hoisted as-is.
|
|
ConnectedComponent.meaningOfLife;
|
|
|
|
// This is a React static, so it's not hoisted.
|
|
// However, ConnectedComponent is still a ComponentClass, which specifies `defaultProps`
|
|
// as an optional static member. We can force an error (and assert that `defaultProps`
|
|
// wasn't hoisted) by reaching into the `defaultProps` object without a null check.
|
|
ConnectedComponent.defaultProps.bar; // $ExpectError
|
|
}
|
|
|
|
function TestProviderContext() {
|
|
const store: Store = createStore((state = {}) => state);
|
|
const nullContext = React.createContext(null);
|
|
|
|
// To ensure type safety when consuming the context in an app, a null-context does not suffice.
|
|
<Provider store={store} context={nullContext}></Provider>; // $ExpectError
|
|
|
|
// Providing a an object of the correct type ensures type safety when consuming the context.
|
|
const initialContextValue: ReactReduxContextValue = { storeState: null, store };
|
|
const context = React.createContext(initialContextValue);
|
|
|
|
<Provider store={store} context={context}></Provider>;
|
|
|
|
// react-redux exports a default context used internally if none is supplied, used as shown below.
|
|
class ComponentWithDefaultContext extends React.Component {
|
|
static contextType = ReactReduxContext;
|
|
}
|
|
|
|
<Provider store={store}>
|
|
<ComponentWithDefaultContext />
|
|
</Provider>;
|
|
|
|
// Null is not a valid value for the context.
|
|
<Provider store={store} context={null} />; // $ExpectError
|
|
}
|
|
|
|
function TestSelector() {
|
|
interface OwnProps { key?: string; }
|
|
interface State { key: string; }
|
|
|
|
const simpleSelect: Selector<State, string> = (state: State) => state.key;
|
|
const notSimpleSelect: Selector<State, string, OwnProps> = (state: State, ownProps: OwnProps) => ownProps.key || state.key;
|
|
|
|
const ownProps = {};
|
|
const state = { key: 'value' };
|
|
simpleSelect(state);
|
|
notSimpleSelect(state, ownProps);
|
|
simpleSelect(state, ownProps); // $ExpectError
|
|
notSimpleSelect(state); // $ExpectError
|
|
}
|
|
|
|
function testShallowEqual() {
|
|
shallowEqual(); // $ExpectError
|
|
shallowEqual('a'); // $ExpectError
|
|
shallowEqual('a', 'a');
|
|
shallowEqual({ test: 'test' }, { test: 'test' });
|
|
shallowEqual({ test: 'test' }, 'a');
|
|
const x: boolean = shallowEqual('a', 'a');
|
|
}
|
|
|
|
function testUseDispatch() {
|
|
const actionCreator = (selected: boolean) => ({
|
|
type: "ACTION_CREATOR",
|
|
payload: selected,
|
|
});
|
|
const thunkActionCreator = (selected: boolean) => {
|
|
return (dispatch: Dispatch) => {
|
|
return dispatch(actionCreator(selected));
|
|
};
|
|
};
|
|
|
|
const dispatch = useDispatch();
|
|
dispatch(actionCreator(true));
|
|
dispatch(thunkActionCreator(true));
|
|
dispatch(true);
|
|
|
|
type ThunkAction<TReturnType> = (dispatch: Dispatch) => TReturnType;
|
|
type ThunkDispatch = <TReturnType>(action: ThunkAction<TReturnType>) => TReturnType;
|
|
// tslint:disable-next-line:no-unnecessary-callback-wrapper (required for the generic parameter)
|
|
const useThunkDispatch = () => useDispatch<ThunkDispatch>();
|
|
const thunkDispatch = useThunkDispatch();
|
|
const result: ReturnType<typeof actionCreator> = thunkDispatch(thunkActionCreator(true));
|
|
}
|
|
|
|
function testUseSelector() {
|
|
interface State {
|
|
counter: number;
|
|
active: string;
|
|
}
|
|
|
|
const selector = (state: State) => {
|
|
return {
|
|
counter: state.counter,
|
|
active: state.active,
|
|
};
|
|
};
|
|
const { counter, active } = useSelector(selector);
|
|
counter === 1;
|
|
counter === "321"; // $ExpectError
|
|
active === "hi";
|
|
active === {}; // $ExpectError
|
|
|
|
const { extraneous } = useSelector(selector); // $ExpectError
|
|
useSelector(selector);
|
|
|
|
useSelector(selector, 'a'); // $ExpectError
|
|
useSelector(selector, (l, r) => l === r);
|
|
useSelector(selector, (l, r) => {
|
|
// $ExpectType { counter: number; active: string; }
|
|
l;
|
|
return l === r;
|
|
});
|
|
|
|
useSelector(selector, shallowEqual);
|
|
const compare = (_l: number, _r: number) => true;
|
|
useSelector(() => 1, compare);
|
|
const compare2 = (_l: number, _r: string) => true;
|
|
useSelector(() => 1, compare2); // $ExpectError
|
|
|
|
interface RootState {
|
|
property: string;
|
|
}
|
|
|
|
const useTypedSelector: TypedUseSelectorHook<RootState> = useSelector;
|
|
|
|
// $ExpectType string
|
|
const r = useTypedSelector(state => {
|
|
// $ExpectType RootState
|
|
state;
|
|
return state.property;
|
|
});
|
|
}
|
|
|
|
function testUseStore() {
|
|
interface TypedState {
|
|
counter: number;
|
|
active: boolean;
|
|
}
|
|
interface TypedAction {
|
|
type: "SET_STATE";
|
|
}
|
|
|
|
const untypedStore = useStore();
|
|
const state = untypedStore.getState();
|
|
state.things.stuff.anything; // any by default
|
|
|
|
const typedStore = useStore<TypedState, TypedAction>();
|
|
const typedState = typedStore.getState();
|
|
typedState.counter;
|
|
typedState.things.stuff; // $ExpectError
|
|
}
|
|
|
|
function testConnectedProps() {
|
|
interface OwnProps {
|
|
own: string;
|
|
}
|
|
const Component: React.FC<OwnProps & ReduxProps> = ({ own, dispatch }) => null;
|
|
|
|
const connector = connect();
|
|
type ReduxProps = ConnectedProps<typeof connector>;
|
|
|
|
const ConnectedComponent = connect(Component);
|
|
}
|
|
|
|
function testConnectedPropsWithState() {
|
|
interface OwnProps {
|
|
own: string;
|
|
}
|
|
const Component: React.FC<OwnProps & ReduxProps> = ({ own, injected, dispatch }) => {
|
|
injected.slice();
|
|
return null;
|
|
};
|
|
|
|
const connector = connect((state: any) => ({ injected: '' }));
|
|
type ReduxProps = ConnectedProps<typeof connector>;
|
|
|
|
const ConnectedComponent = connect(Component);
|
|
}
|
|
|
|
function testConnectedPropsWithStateAndActions() {
|
|
interface OwnProps {
|
|
own: string;
|
|
}
|
|
const actionCreator = () => ({ type: 'action' });
|
|
|
|
const Component: React.FC<OwnProps & ReduxProps> = ({ own, injected, actionCreator }) => {
|
|
actionCreator();
|
|
return null;
|
|
};
|
|
|
|
const ComponentWithDispatch: React.FC<OwnProps & ReduxProps> = ({ own, dispatch }) => null; // $ExpectError
|
|
|
|
const connector = connect(
|
|
(state: any) => ({ injected: '' }),
|
|
{ actionCreator }
|
|
);
|
|
type ReduxProps = ConnectedProps<typeof connector>;
|
|
|
|
const ConnectedComponent = connect(Component);
|
|
}
|