diff --git a/react-redux/react-redux-tests.tsx b/react-redux/react-redux-tests.tsx
index 852c0822a..a8841d080 100644
--- a/react-redux/react-redux-tests.tsx
+++ b/react-redux/react-redux-tests.tsx
@@ -1,16 +1,105 @@
///
///
///
+///
+///
import { Component } from 'react';
import * as React from 'react';
-import { Store } from 'redux';
+import * as Router from 'react-router';
+import { Route, RouterState } from 'react-router';
+import { Store, Dispatch, bindActionCreators } from 'redux';
import { connect, Provider } from 'react-redux';
+import objectAssign = require('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;
+
+class Counter extends Component {
+ render() {
+ return (
+
+ );
+ }
+}
+
+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 Component {
+
+}
+
+class App extends Component {
+ render(): JSX.Element {
+ // ...
+ return null;
+ }
+}
+
+const targetEl = document.getElementById('root');
+
+React.render((
+
+ {() => }
+
+), targetEl);
+
+
+//
+// API
+// https://github.com/rackt/react-redux/blob/master/docs/api.md
+//
+declare var routes: Route;
+declare var store: Store;
+declare var routerState: RouterState;
class MyRootComponent extends Component {
}
-var store: Store;
+class TodoApp extends Component {
+
+}
+interface TodoState {
+ todos: string[]|string;
+}
+interface TodoProps {
+ userId: number;
+}
+interface DispatchProps {
+ addTodo(userId: number, text: string): void;
+}
+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; };
React.render(
@@ -19,32 +108,133 @@ React.render(
document.body
);
+Router.run(routes, Router.HistoryLocation, (Handler, routerState) => { // note "routerState" here
+ React.render(
+
+ {() => } // note "routerState" here: important to pass it down
+ ,
+ document.getElementById('root')
+ );
+});
+React.render(
+
+ {() => ...}
+ ,
+ targetEl
+);
-function mapStateToProps(state: any): any {
- return {
- value: state.counter
- };
+// 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 };
}
-let increment: Function;
-function mapDispatchToProps(dispatch: any): any {
- return {
- onIncrement: () => dispatch(increment())
- };
+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) {
+ return { actions: bindActionCreators(actionCreators, dispatch) };
}
-export class Counter extends Component {
+connect(mapStateToProps2, mapDispatchToProps2)(TodoApp);
+
+// Inject todos and a specific action creator (addTodo)
+
+//function mapStateToProps(state) {
+// return { todos: state.todos };
+//}
+
+function mapDispatchToProps3(dispatch: Dispatch) {
+ return bindActionCreators({ addTodo }, dispatch);
}
-export default connect(
- mapStateToProps,
- mapDispatchToProps
-)(Counter);
+connect(mapStateToProps2, mapDispatchToProps3)(TodoApp);
-@connect(mapStateToProps)
-export class Counter2 extends Component {
+// Inject todos, todoActionCreators as todoActions, and counterActionCreators as counterActions
+
+//function mapStateToProps(state) {
+// return { todos: state.todos };
+//}
+
+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 mapStateToProps(state) {
+// return { todos: state.todos };
+//}
+
+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 mapStateToProps(state) {
+// return { todos: state.todos };
+//}
+
+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 mapStateToProps(state) {
+// return { todos: state.todos };
+//}
+
+function mergeProps(stateProps: TodoState, dispatchProps: DispatchProps, ownProps: TodoProps): DispatchProps & TodoState {
+ return objectAssign({}, ownProps, {
+ todos: stateProps.todos[ownProps.userId],
+ addTodo: (text: string) => dispatchProps.addTodo(ownProps.userId, text)
+ });
+}
+
+connect(mapStateToProps2, actionCreators, mergeProps)(TodoApp);
+
diff --git a/react-redux/react-redux.d.ts b/react-redux/react-redux.d.ts
index 1a6a5cba1..454399f83 100644
--- a/react-redux/react-redux.d.ts
+++ b/react-redux/react-redux.d.ts
@@ -1,4 +1,4 @@
-// Type definitions for react-redux
+// Type definitions for react-redux 2.1.2
// Project: https://github.com/rackt/react-redux
// Definitions by: Qubo
// Definitions: https://github.com/borisyankov/DefinitelyTyped