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