mirror of
https://github.com/zhigang1992/DefinitelyTyped.git
synced 2026-04-23 04:49:15 +08:00
Revert "More accurate hinted and inferred types for react-redux connect()"
This reverts commit 27b98d0580.
This commit is contained in:
Nathan Shively-Sanders
211
react-redux/index.d.ts
vendored
211
react-redux/index.d.ts
vendored
@@ -6,119 +6,102 @@
|
||||
import * as React from 'react';
|
||||
import * as Redux from 'redux';
|
||||
|
||||
export = ReactRedux;
|
||||
type ComponentClass<P> = React.ComponentClass<P>;
|
||||
type StatelessComponent<P> = React.StatelessComponent<P>;
|
||||
type ReactNode = React.ReactNode;
|
||||
type Store<S> = Redux.Store<S>;
|
||||
type Dispatch<S> = Redux.Dispatch<S>;
|
||||
type ActionCreator<A> = Redux.ActionCreator<A>;
|
||||
|
||||
declare namespace ReactRedux {
|
||||
|
||||
type ComponentType<P> = React.ComponentClass<P> | React.StatelessComponent<P>;
|
||||
|
||||
interface ComponentDecorator<M, P> {
|
||||
<TargetClass extends ComponentType<M>>(component: TargetClass): TargetClass & ConnectClass<P, TargetClass>;
|
||||
}
|
||||
|
||||
interface ConnectState<S> {
|
||||
storeState: S
|
||||
}
|
||||
|
||||
class Connect<P, S> extends React.Component<P, ConnectState<S>> {
|
||||
version: number;
|
||||
store: Redux.Store<S>;
|
||||
state: ConnectState<S>;
|
||||
}
|
||||
|
||||
interface ConnectClass<P, W> extends React.ComponentClass<P> {
|
||||
constructor<S>(props?: P, context?: any): Connect<P, S>;
|
||||
WrappedComponent: W;
|
||||
}
|
||||
|
||||
export type DefaultStateProps = {};
|
||||
export type DefaultDispatchProps = { dispatch: Redux.Dispatch<any> };
|
||||
export type DefaultMergedProps<TStateProps, TDispatchProps, TOwnProps> = TOwnProps & TStateProps & TDispatchProps;
|
||||
|
||||
/**
|
||||
* Connects a React component to a Redux store.
|
||||
*
|
||||
* - Without arguments, just wraps the component, without changing the behavior / props
|
||||
*
|
||||
* - If 2 params are passed (3rd param, mergeProps, is skipped), default behavior
|
||||
* is to override ownProps (as stated in the docs), so what remains is everything that's
|
||||
* not a state or dispatch prop
|
||||
*
|
||||
* - When 3rd param is passed, we don't know if ownProps propagate and whether they
|
||||
* should be valid component props, because it depends on mergeProps implementation.
|
||||
* As such, it is the user's responsibility to extend ownProps interface from state or
|
||||
* dispatch props or both when applicable
|
||||
*
|
||||
* @param mapStateToProps
|
||||
* @param mapDispatchToProps
|
||||
* @param mergeProps
|
||||
* @param options
|
||||
*/
|
||||
export function connect<TOwnProps>(
|
||||
mapStateToProps?: FuncOrSelf<InferableMapStateToProps<TOwnProps>>,
|
||||
mapDispatchToProps?: FuncOrSelf<InferableMapDispatchToPropsFunction<TOwnProps> | MapDispatchToPropsObject>,
|
||||
mergeProps?: void,
|
||||
options?: Options
|
||||
): ComponentDecorator<any, TOwnProps>;
|
||||
|
||||
export function connect<TStateProps, TDispatchProps, TOwnProps>(
|
||||
mapStateToProps?: FuncOrSelf<MapStateToProps<TStateProps, TOwnProps>>,
|
||||
mapDispatchToProps?: FuncOrSelf<MapDispatchToPropsFunction<TDispatchProps, TOwnProps> | MapDispatchToPropsObject>,
|
||||
mergeProps?: void,
|
||||
options?: Options
|
||||
): ComponentDecorator<DefaultMergedProps<TStateProps, TDispatchProps, TOwnProps>, TOwnProps>;
|
||||
|
||||
export function connect<TStateProps, TDispatchProps, TOwnProps, TMergedProps>(
|
||||
mapStateToProps?: FuncOrSelf<MapStateToProps<TStateProps, TOwnProps>>,
|
||||
mapDispatchToProps?: FuncOrSelf<MapDispatchToPropsFunction<TDispatchProps, TOwnProps> | MapDispatchToPropsObject>,
|
||||
mergeProps?: MergeProps<TStateProps, TDispatchProps, TOwnProps, TMergedProps>,
|
||||
options?: Options
|
||||
): ComponentDecorator<TMergedProps, TOwnProps>;
|
||||
|
||||
type FuncOrSelf<T> = (() => T) | T;
|
||||
|
||||
type MapStateToProps<TStateProps, TOwnProps> = (state: any, ownProps?: TOwnProps) => TStateProps;
|
||||
|
||||
type InferableMapStateToProps<TOwnProps> = <TStateProps>(state: any, ownProps?: TOwnProps) => TStateProps;
|
||||
|
||||
type MapDispatchToPropsFunction<TDispatchProps, TOwnProps> = (dispatch: Redux.Dispatch<any>, ownProps?: TOwnProps) => TDispatchProps;
|
||||
|
||||
type InferableMapDispatchToPropsFunction<TOwnProps> = <TDispatchProps>(dispatch: Redux.Dispatch<any>, ownProps?: TOwnProps) => TDispatchProps;
|
||||
|
||||
type MapDispatchToPropsObject = {
|
||||
[name: string]: Redux.ActionCreator<any>;
|
||||
}
|
||||
|
||||
type MergeProps<TStateProps, TDispatchProps, TOwnProps, TMergedProps> =
|
||||
(stateProps: TStateProps, dispatchProps: TDispatchProps, ownProps: TOwnProps) => TMergedProps;
|
||||
|
||||
export interface Options {
|
||||
/**
|
||||
* If true, implements shouldComponentUpdate and shallowly compares the result of mergeProps,
|
||||
* preventing unnecessary updates, assuming that the component is a “pure” component
|
||||
* and does not rely on any input or state other than its props and the selected Redux store’s state.
|
||||
* Defaults to true.
|
||||
* @default true
|
||||
*/
|
||||
pure?: boolean;
|
||||
/**
|
||||
* If true, stores a ref to the wrapped component instance and makes it available via
|
||||
* getWrappedInstance() method. Defaults to false.
|
||||
*/
|
||||
withRef?: boolean;
|
||||
}
|
||||
|
||||
export interface ProviderProps {
|
||||
/**
|
||||
* The single Redux store in your application.
|
||||
*/
|
||||
store?: Redux.Store<any>;
|
||||
children?: React.ReactNode;
|
||||
}
|
||||
|
||||
/**
|
||||
* Makes the Redux store available to the connect() calls in the component hierarchy below.
|
||||
*/
|
||||
export class Provider extends React.Component<ProviderProps, {}> {
|
||||
}
|
||||
interface ComponentDecorator<TOriginalProps, TOwnProps> {
|
||||
(component: ComponentClass<TOriginalProps> | StatelessComponent<TOriginalProps>): ComponentClass<TOwnProps>;
|
||||
}
|
||||
|
||||
/**
|
||||
* Decorator that infers the type from the original component
|
||||
*
|
||||
* Can't use the above decorator because it would default the type to {}
|
||||
*/
|
||||
export interface InferableComponentDecorator {
|
||||
<P, TComponentConstruct extends (ComponentClass<P> | StatelessComponent<P>)>(component: TComponentConstruct): TComponentConstruct;
|
||||
}
|
||||
|
||||
/**
|
||||
* Connects a React component to a Redux store.
|
||||
*
|
||||
* - Without arguments, just wraps the component, without changing the behavior / props
|
||||
*
|
||||
* - If 2 params are passed (3rd param, mergeProps, is skipped), default behavior
|
||||
* is to override ownProps (as stated in the docs), so what remains is everything that's
|
||||
* not a state or dispatch prop
|
||||
*
|
||||
* - When 3rd param is passed, we don't know if ownProps propagate and whether they
|
||||
* should be valid component props, because it depends on mergeProps implementation.
|
||||
* As such, it is the user's responsibility to extend ownProps interface from state or
|
||||
* dispatch props or both when applicable
|
||||
*
|
||||
* @param mapStateToProps
|
||||
* @param mapDispatchToProps
|
||||
* @param mergeProps
|
||||
* @param options
|
||||
*/
|
||||
export declare function connect(): InferableComponentDecorator;
|
||||
|
||||
export declare function connect<TStateProps, TDispatchProps, TOwnProps>(
|
||||
mapStateToProps: FuncOrSelf<MapStateToProps<TStateProps, TOwnProps>>,
|
||||
mapDispatchToProps?: FuncOrSelf<MapDispatchToPropsFunction<TDispatchProps, TOwnProps> | MapDispatchToPropsObject>
|
||||
): ComponentDecorator<TStateProps & TDispatchProps, TOwnProps>;
|
||||
|
||||
export declare function connect<TStateProps, TDispatchProps, TOwnProps>(
|
||||
mapStateToProps: FuncOrSelf<MapStateToProps<TStateProps, TOwnProps>>,
|
||||
mapDispatchToProps: FuncOrSelf<MapDispatchToPropsFunction<TDispatchProps, TOwnProps> | MapDispatchToPropsObject>,
|
||||
mergeProps: MergeProps<TStateProps, TDispatchProps, TOwnProps>,
|
||||
options?: Options
|
||||
): ComponentDecorator<TStateProps & TDispatchProps, TOwnProps>;
|
||||
|
||||
type FuncOrSelf<T> = T | (() => T);
|
||||
|
||||
interface MapStateToProps<TStateProps, TOwnProps> {
|
||||
(state: any, ownProps?: TOwnProps): TStateProps;
|
||||
}
|
||||
|
||||
interface MapDispatchToPropsFunction<TDispatchProps, TOwnProps> {
|
||||
(dispatch: Dispatch<any>, ownProps?: TOwnProps): TDispatchProps;
|
||||
}
|
||||
|
||||
interface MapDispatchToPropsObject {
|
||||
[name: string]: ActionCreator<any>;
|
||||
}
|
||||
|
||||
interface MergeProps<TStateProps, TDispatchProps, TOwnProps> {
|
||||
(stateProps: TStateProps, dispatchProps: TDispatchProps, ownProps: TOwnProps): TStateProps & TDispatchProps;
|
||||
}
|
||||
|
||||
interface Options {
|
||||
/**
|
||||
* If true, implements shouldComponentUpdate and shallowly compares the result of mergeProps,
|
||||
* preventing unnecessary updates, assuming that the component is a “pure” component
|
||||
* and does not rely on any input or state other than its props and the selected Redux store’s state.
|
||||
* Defaults to true.
|
||||
* @default true
|
||||
*/
|
||||
pure?: boolean;
|
||||
/**
|
||||
* If true, stores a ref to the wrapped component instance and makes it available via
|
||||
* getWrappedInstance() method. Defaults to false.
|
||||
*/
|
||||
withRef?: boolean;
|
||||
}
|
||||
|
||||
export interface ProviderProps {
|
||||
/**
|
||||
* The single Redux store in your application.
|
||||
*/
|
||||
store?: Store<any>;
|
||||
children?: ReactNode;
|
||||
}
|
||||
|
||||
/**
|
||||
* Makes the Redux store available to the connect() calls in the component hierarchy below.
|
||||
*/
|
||||
export class Provider extends React.Component<ProviderProps, {}> { }
|
||||
|
||||
@@ -8,7 +8,7 @@ import { Component, ReactElement } from 'react';
|
||||
import * as React from 'react';
|
||||
import * as ReactDOM from 'react-dom';
|
||||
import { Router, RouterState } from 'react-router';
|
||||
import { ActionCreator, Store, Dispatch, bindActionCreators } from 'redux';
|
||||
import { Store, Dispatch, bindActionCreators } from 'redux';
|
||||
import { connect, Provider } from 'react-redux';
|
||||
import objectAssign = require('object-assign');
|
||||
import * as History from 'history';
|
||||
@@ -17,324 +17,302 @@ import * as History from 'history';
|
||||
// Quick Start
|
||||
// https://github.com/rackt/react-redux/blob/master/docs/quick-start.md#quick-start
|
||||
//
|
||||
namespace TestQuickStartExample {
|
||||
interface CounterStateProps {
|
||||
value: number;
|
||||
}
|
||||
interface CounterDispatchProps {
|
||||
onIncrement: ActionCreator<CounterState>;
|
||||
}
|
||||
interface CounterState {
|
||||
counter: number;
|
||||
}
|
||||
declare var increment: Function;
|
||||
|
||||
class Counter extends Component<CounterStateProps & CounterDispatchProps, CounterState> {
|
||||
render() {
|
||||
return (
|
||||
<button onClick={this.props.onIncrement}>
|
||||
{this.props.value}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
}
|
||||
interface CounterState {
|
||||
counter: number;
|
||||
}
|
||||
declare var increment: Function;
|
||||
|
||||
const mapStateToProps = (state: CounterState) => ({
|
||||
class Counter extends 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?
|
||||
const mapDispatchToProps = (dispatch: Dispatch<CounterState>) => ({
|
||||
// Which action creators does it want to receive by props?
|
||||
function mapDispatchToProps(dispatch: Dispatch<CounterState>) {
|
||||
return {
|
||||
onIncrement: () => dispatch(increment())
|
||||
};
|
||||
}
|
||||
|
||||
connect(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps
|
||||
)(Counter);
|
||||
|
||||
|
||||
@connect(mapStateToProps)
|
||||
class CounterContainer extends Component<any, any> {
|
||||
|
||||
}
|
||||
|
||||
// Ensure connect's first two arguments can be replaced by wrapper functions
|
||||
interface ICounterStateProps {
|
||||
value: number
|
||||
}
|
||||
interface ICounterDispatchProps {
|
||||
onIncrement: () => void
|
||||
}
|
||||
connect<ICounterStateProps, ICounterDispatchProps, {}>(
|
||||
() => mapStateToProps,
|
||||
() => mapDispatchToProps
|
||||
)(Counter);
|
||||
// only first argument
|
||||
connect<ICounterStateProps, {}, {}>(
|
||||
() => mapStateToProps
|
||||
)(Counter);
|
||||
// wrap only one argument
|
||||
connect<ICounterStateProps, ICounterDispatchProps, {}>(
|
||||
mapStateToProps,
|
||||
() => mapDispatchToProps
|
||||
)(Counter);
|
||||
// with extra arguments
|
||||
connect<ICounterStateProps, ICounterDispatchProps, {}>(
|
||||
() => mapStateToProps,
|
||||
() => mapDispatchToProps,
|
||||
(s: ICounterStateProps, d: ICounterDispatchProps) =>
|
||||
objectAssign({}, s, d),
|
||||
{ pure: true }
|
||||
)(Counter);
|
||||
|
||||
|
||||
class App extends Component<any, any> {
|
||||
render(): JSX.Element {
|
||||
// ...
|
||||
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>;
|
||||
declare var routerState: RouterState;
|
||||
declare var history: History.History;
|
||||
class MyRootComponent extends Component<any, any> {
|
||||
|
||||
}
|
||||
class TodoApp extends Component<any, any> {
|
||||
|
||||
}
|
||||
interface TodoState {
|
||||
todos: string[]|string;
|
||||
}
|
||||
interface TodoProps {
|
||||
userId: number;
|
||||
}
|
||||
interface DispatchProps {
|
||||
addTodo(userId: number, text: string): void;
|
||||
action: Function;
|
||||
}
|
||||
declare var actionCreators: () => {
|
||||
action: Function;
|
||||
}
|
||||
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
|
||||
);
|
||||
|
||||
//TODO: for React Router 0.13
|
||||
////TODO: error TS2339: Property 'run' does not exist on type 'typeof "react-router"'.
|
||||
////TODO: error TS2339: Property 'HistoryLocation' does not exist on type 'typeof "react-router"'.
|
||||
//declare var routes: any;
|
||||
//Router.run(routes, Router.HistoryLocation, (Handler, routerState) => { // note "routerState" here
|
||||
// ReactDOM.render(
|
||||
// <Provider store={store}>
|
||||
// {/*
|
||||
// //TODO: error TS2339: Property 'routerState' does not exist on type 'RouteProp'.
|
||||
// {() => <Handler routerState={routerState} />} // note "routerState" here: important to pass it down
|
||||
// */}
|
||||
// </Provider>,
|
||||
// document.getElementById('root')
|
||||
// );
|
||||
//});
|
||||
|
||||
|
||||
//TODO: for React Router 1.0
|
||||
ReactDOM.render(
|
||||
<Provider store={store}>
|
||||
{() => <Router history={history}>...</Router>}
|
||||
</Provider>,
|
||||
targetEl
|
||||
);
|
||||
|
||||
// Inject just dispatch and don't listen to store
|
||||
|
||||
connect()(TodoApp);
|
||||
|
||||
// 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);
|
||||
|
||||
// Inject todos and all action creators (addTodo, completeTodo, ...)
|
||||
|
||||
//function mapStateToProps(state) {
|
||||
// return { todos: state.todos };
|
||||
//}
|
||||
|
||||
connect(mapStateToProps2, actionCreators)(TodoApp);
|
||||
|
||||
// Inject todos and all action creators (addTodo, completeTodo, ...) as actions
|
||||
|
||||
//function mapStateToProps(state) {
|
||||
// return { todos: state.todos };
|
||||
//}
|
||||
|
||||
function mapDispatchToProps2(dispatch: Dispatch<TodoState>) {
|
||||
return { actions: bindActionCreators(actionCreators, dispatch) };
|
||||
}
|
||||
|
||||
connect(mapStateToProps2, mapDispatchToProps2)(TodoApp);
|
||||
|
||||
// Inject todos and a specific action creator (addTodo)
|
||||
|
||||
//function mapStateToProps(state) {
|
||||
// return { todos: state.todos };
|
||||
//}
|
||||
|
||||
function mapDispatchToProps3(dispatch: Dispatch<TodoState>) {
|
||||
return bindActionCreators({ addTodo }, dispatch);
|
||||
}
|
||||
|
||||
connect(mapStateToProps2, mapDispatchToProps3)(TodoApp);
|
||||
|
||||
// Inject todos, todoActionCreators as todoActions, and counterActionCreators as counterActions
|
||||
|
||||
//function mapStateToProps(state) {
|
||||
// return { todos: state.todos };
|
||||
//}
|
||||
|
||||
function mapDispatchToProps4(dispatch: Dispatch<TodoState>) {
|
||||
return {
|
||||
todoActions: bindActionCreators(todoActionCreators, dispatch),
|
||||
counterActions: bindActionCreators(counterActionCreators, dispatch)
|
||||
};
|
||||
}
|
||||
|
||||
connect(mapStateToProps2, mapDispatchToProps4)(TodoApp);
|
||||
|
||||
// Inject todos, and todoActionCreators and counterActionCreators together as actions
|
||||
|
||||
//function mapStateToProps(state) {
|
||||
// return { todos: state.todos };
|
||||
//}
|
||||
|
||||
function mapDispatchToProps5(dispatch: Dispatch<TodoState>) {
|
||||
return {
|
||||
actions: bindActionCreators(objectAssign({}, todoActionCreators, counterActionCreators), dispatch)
|
||||
};
|
||||
}
|
||||
|
||||
connect(mapStateToProps2, mapDispatchToProps5)(TodoApp);
|
||||
|
||||
// Inject todos, and all todoActionCreators and counterActionCreators directly as props
|
||||
|
||||
//function mapStateToProps(state) {
|
||||
// return { todos: state.todos };
|
||||
//}
|
||||
|
||||
function mapDispatchToProps6(dispatch: Dispatch<TodoState>) {
|
||||
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 mapStateToProps(state) {
|
||||
// return { todos: state.todos };
|
||||
//}
|
||||
|
||||
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(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps
|
||||
)(Counter);
|
||||
|
||||
// https://github.com/Microsoft/TypeScript/issues/4881
|
||||
//@connect(mapStateToProps)
|
||||
//class WrappedCounter extends Component<CounterStateProps & CounterDispatchProps, CounterState> {
|
||||
//}
|
||||
//React.createElement(WrappedCounter, {});
|
||||
// As a workaround, declare state and dispatch props as optional
|
||||
interface OptionalCounterStateProps {
|
||||
value?: number;
|
||||
}
|
||||
interface OptionalCounterDispatchProps {
|
||||
onIncrement?: ActionCreator<CounterState>;
|
||||
}
|
||||
interface Props {
|
||||
requiredOwnProp: string
|
||||
}
|
||||
@connect(mapStateToProps)
|
||||
class WrappedCounter extends Component<Props & OptionalCounterStateProps & OptionalCounterDispatchProps, CounterState> {
|
||||
}
|
||||
React.createElement(WrappedCounter, { requiredOwnProp: 'here I am' });
|
||||
|
||||
// Ensure connect's first two arguments can be replaced by wrapper functions
|
||||
connect<CounterStateProps, CounterDispatchProps, {}>(
|
||||
() => mapStateToProps,
|
||||
() => mapDispatchToProps
|
||||
)(Counter);
|
||||
// only first argument
|
||||
connect<CounterStateProps, {}, {}>(
|
||||
() => mapStateToProps
|
||||
)(Counter);
|
||||
// wrap only one argument
|
||||
connect<CounterStateProps, CounterDispatchProps, {}>(
|
||||
mapStateToProps,
|
||||
() => mapDispatchToProps
|
||||
)(Counter);
|
||||
// with extra arguments
|
||||
connect<CounterStateProps, CounterDispatchProps, {}, CounterStateProps & CounterDispatchProps>(
|
||||
() => mapStateToProps,
|
||||
() => mapDispatchToProps,
|
||||
(stateProps: CounterStateProps, dispatchProps: CounterDispatchProps) =>
|
||||
objectAssign({}, stateProps, dispatchProps),
|
||||
{ pure: true }
|
||||
)(Counter);
|
||||
}
|
||||
|
||||
namespace TestTodosApp {
|
||||
|
||||
class App extends Component<any, any> {
|
||||
render(): JSX.Element {
|
||||
// ...
|
||||
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>;
|
||||
declare var routerState: RouterState;
|
||||
declare var history: History.History;
|
||||
class MyRootComponent extends Component<{}, RouterState> {
|
||||
}
|
||||
class TodoApp extends Component<any, TodoState> {
|
||||
}
|
||||
interface TodoState {
|
||||
todos: string[] | string;
|
||||
}
|
||||
interface TodoProps {
|
||||
userId: number;
|
||||
}
|
||||
interface DispatchProps {
|
||||
addTodo(userId: number, text: string): void;
|
||||
action: Function;
|
||||
}
|
||||
declare var actionCreators: () => {
|
||||
action: Function;
|
||||
}
|
||||
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
|
||||
);
|
||||
|
||||
//TODO: for React Router 0.13
|
||||
////TODO: error TS2339: Property 'run' does not exist on type 'typeof "react-router"'.
|
||||
////TODO: error TS2339: Property 'HistoryLocation' does not exist on type 'typeof "react-router"'.
|
||||
//declare var routes: any;
|
||||
//Router.run(routes, Router.HistoryLocation, (Handler, routerState) => { // note "routerState" here
|
||||
// ReactDOM.render(
|
||||
// <Provider store={store}>
|
||||
// {/*
|
||||
// //TODO: error TS2339: Property 'routerState' does not exist on type 'RouteProp'.
|
||||
// {() => <Handler routerState={routerState} />} // note "routerState" here: important to pass it down
|
||||
// */}
|
||||
// </Provider>,
|
||||
// document.getElementById('root')
|
||||
// );
|
||||
//});
|
||||
connect(mapStateToProps2, actionCreators, mergeProps)(TodoApp);
|
||||
|
||||
|
||||
//TODO: for React Router 1.0
|
||||
ReactDOM.render(
|
||||
<Provider store={store}>
|
||||
{() => <Router history={history}>...</Router>}
|
||||
</Provider>,
|
||||
targetEl
|
||||
);
|
||||
|
||||
// Inject just dispatch and don't listen to store
|
||||
|
||||
connect()(TodoApp);
|
||||
|
||||
// Inject dispatch and every field in the global state
|
||||
|
||||
connect((state: TodoState) => state)(TodoApp);
|
||||
|
||||
// Inject dispatch and todos
|
||||
|
||||
function mapStateToProps(state: TodoState) {
|
||||
return { todos: state.todos };
|
||||
}
|
||||
|
||||
connect(mapStateToProps)(TodoApp);
|
||||
|
||||
// Inject todos and all action creators (addTodo, completeTodo, ...)
|
||||
|
||||
//function mapStateToProps(state) {
|
||||
// return { todos: state.todos };
|
||||
//}
|
||||
|
||||
connect(mapStateToProps, actionCreators)(TodoApp);
|
||||
|
||||
// Inject todos and all action creators (addTodo, completeTodo, ...) as actions
|
||||
|
||||
//function mapStateToProps(state) {
|
||||
// return { todos: state.todos };
|
||||
//}
|
||||
|
||||
function mapDispatchToProps(dispatch: Dispatch<TodoState>) {
|
||||
return { actions: bindActionCreators(actionCreators, dispatch) };
|
||||
}
|
||||
|
||||
connect(mapStateToProps, mapDispatchToProps)(TodoApp);
|
||||
|
||||
// Inject todos and a specific action creator (addTodo)
|
||||
|
||||
//function mapStateToProps(state) {
|
||||
// return { todos: state.todos };
|
||||
//}
|
||||
|
||||
function mapDispatchToProps2(dispatch: Dispatch<TodoState>) {
|
||||
return bindActionCreators({ addTodo }, dispatch);
|
||||
}
|
||||
|
||||
connect(mapStateToProps, mapDispatchToProps2)(TodoApp);
|
||||
|
||||
// Inject todos, todoActionCreators as todoActions, and counterActionCreators as counterActions
|
||||
|
||||
//function mapStateToProps(state) {
|
||||
// return { todos: state.todos };
|
||||
//}
|
||||
|
||||
function mapDispatchToProps3(dispatch: Dispatch<TodoState>) {
|
||||
return {
|
||||
todoActions: bindActionCreators(todoActionCreators, dispatch),
|
||||
counterActions: bindActionCreators(counterActionCreators, dispatch)
|
||||
};
|
||||
}
|
||||
|
||||
connect(mapStateToProps, mapDispatchToProps3)(TodoApp);
|
||||
|
||||
// Inject todos, and todoActionCreators and counterActionCreators together as actions
|
||||
|
||||
//function mapStateToProps(state) {
|
||||
// return { todos: state.todos };
|
||||
//}
|
||||
|
||||
function mapDispatchToProps4(dispatch: Dispatch<TodoState>) {
|
||||
return {
|
||||
actions: bindActionCreators(objectAssign({}, todoActionCreators, counterActionCreators), dispatch)
|
||||
};
|
||||
}
|
||||
|
||||
connect(mapStateToProps, mapDispatchToProps4)(TodoApp);
|
||||
|
||||
// Inject todos, and all todoActionCreators and counterActionCreators directly as props
|
||||
|
||||
//function mapStateToProps(state) {
|
||||
// return { todos: state.todos };
|
||||
//}
|
||||
|
||||
function mapDispatchToProps5(dispatch: Dispatch<TodoState>) {
|
||||
return bindActionCreators(objectAssign({}, todoActionCreators, counterActionCreators), dispatch);
|
||||
}
|
||||
|
||||
connect(mapStateToProps, mapDispatchToProps5)(TodoApp);
|
||||
|
||||
// Inject todos of a specific user depending on props
|
||||
|
||||
function mapStateToProps2(state: TodoState, ownProps: TodoProps): TodoState {
|
||||
return { todos: state.todos[ownProps.userId] };
|
||||
}
|
||||
|
||||
connect(mapStateToProps2)(TodoApp);
|
||||
|
||||
// Inject todos of a specific user depending on props, and inject props.userId into the action
|
||||
|
||||
//function mapStateToProps(state) {
|
||||
// return { todos: state.todos };
|
||||
//}
|
||||
|
||||
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(mapStateToProps, actionCreators, mergeProps)(TodoApp);
|
||||
interface TestProp {
|
||||
property1: number;
|
||||
someOtherProperty?: string;
|
||||
}
|
||||
|
||||
namespace TestComponent {
|
||||
declare var store: Store<TestState>;
|
||||
interface TestProps {
|
||||
property1: number;
|
||||
someOtherProperty?: string;
|
||||
}
|
||||
interface TestState {
|
||||
isLoaded: boolean;
|
||||
state1: number;
|
||||
}
|
||||
class TestComponent extends Component<TestProps, TestState> {
|
||||
static staticMethod(): number {
|
||||
return 0;
|
||||
}
|
||||
}
|
||||
// Own properties can't be always be inferred, so a single type parameter will do
|
||||
const WrappedTestComponent = connect<TestProps>()(TestComponent);
|
||||
|
||||
// return value of the connect()(TestComponent) is of the type TestComponent
|
||||
let ATestComponent: typeof TestComponent = null;
|
||||
ATestComponent = TestComponent;
|
||||
ATestComponent = WrappedTestComponent;
|
||||
// Wrapped component is accessible
|
||||
WrappedTestComponent.WrappedComponent === TestComponent
|
||||
// Static properties are accessible
|
||||
WrappedTestComponent.staticMethod();
|
||||
|
||||
<TestComponent property1={42}/>;
|
||||
<WrappedTestComponent property1={42}/>;
|
||||
<ATestComponent property1={42}/>;
|
||||
|
||||
class NonComponent {
|
||||
}
|
||||
// this doesn't compile
|
||||
//connect()(NonComponent);
|
||||
|
||||
// stateless functions
|
||||
interface HelloMessageProps {
|
||||
name: string;
|
||||
}
|
||||
function HelloMessage(props: HelloMessageProps) {
|
||||
return <div>Hello {props.name}</div>;
|
||||
}
|
||||
|
||||
const ConnectedHelloMessage = connect<HelloMessageProps>()(HelloMessage);
|
||||
ReactDOM.render(<HelloMessage name="Sebastian"/>, document.getElementById('content'));
|
||||
ReactDOM.render(<ConnectedHelloMessage name="Sebastian"/>, document.getElementById('content'));
|
||||
interface TestState {
|
||||
isLoaded: boolean;
|
||||
state1: number;
|
||||
}
|
||||
class TestComponent extends Component<TestProp, TestState> { }
|
||||
const WrappedTestComponent = connect()(TestComponent);
|
||||
|
||||
// return value of the connect()(TestComponent) is of the type TestComponent
|
||||
let ATestComponent: typeof TestComponent = null;
|
||||
ATestComponent = TestComponent;
|
||||
ATestComponent = WrappedTestComponent;
|
||||
|
||||
let anElement: ReactElement<TestProp>;
|
||||
<TestComponent property1={42} />;
|
||||
<WrappedTestComponent property1={42} />;
|
||||
<ATestComponent property1={42} />;
|
||||
|
||||
class NonComponent {}
|
||||
// this doesn't compile
|
||||
//connect()(NonComponent);
|
||||
|
||||
// stateless functions
|
||||
interface HelloMessageProps { name: string; }
|
||||
function HelloMessage(props: HelloMessageProps) {
|
||||
return <div>Hello {props.name}</div>;
|
||||
}
|
||||
let ConnectedHelloMessage = connect()(HelloMessage);
|
||||
ReactDOM.render(<HelloMessage name="Sebastian" />, document.getElementById('content'));
|
||||
ReactDOM.render(<ConnectedHelloMessage name="Sebastian" />, document.getElementById('content'));
|
||||
|
||||
// stateless functions that uses mapStateToProps and mapDispatchToProps
|
||||
namespace TestStatelessFunctionWithMapArguments {
|
||||
@@ -365,8 +343,6 @@ namespace TestStatelessFunctionWithMapArguments {
|
||||
mapStateToProps,
|
||||
mapDispatchToProps
|
||||
)(Greeting);
|
||||
|
||||
React.createElement(ConnectedGreeting, { name: 'hello', onClick: () => undefined });
|
||||
}
|
||||
|
||||
// https://github.com/DefinitelyTyped/DefinitelyTyped/issues/8787
|
||||
@@ -398,7 +374,7 @@ namespace TestTOwnPropsInference {
|
||||
const ConnectedWithTypeHint = connect<StateProps, {}, OwnProps>(mapStateToPropsWithoutOwnProps)(OwnPropsComponent);
|
||||
|
||||
// This compiles, which is bad.
|
||||
// React.createElement(ConnectedWithoutOwnProps, { anything: 'goes!' });
|
||||
React.createElement(ConnectedWithoutOwnProps, { anything: 'goes!' });
|
||||
|
||||
// This compiles, as expected.
|
||||
React.createElement(ConnectedWithOwnProps, { own: 'string' });
|
||||
|
||||
Reference in New Issue
Block a user