diff --git a/docs/recipes/MigratingToES7.md b/docs/recipes/MigratingToES7.md new file mode 100644 index 0000000000..5407796915 --- /dev/null +++ b/docs/recipes/MigratingToES7.md @@ -0,0 +1,81 @@ +# Migrating to ES7 + +If you like ES7 syntactic sugar you can use it with Redux! + +## mapStateToProps() -> @connect + +Example based on "Todo List" app + +**ES6**: + +```js +class App extends Component { +... +} + +function mapStateToProps(state) { + return { + visibleTodos: selectTodos(state.todos, state.visibilityFilter), + visibilityFilter: state.visibilityFilter + }; +} + +export default connect(select)(App); + +``` + +**ES7**: + +```js +@connect(state => ({ + visibleTodos: selectTodos(state.todos, state.visibilityFilter), + visibilityFilter: state.visibilityFilter +})) +export default class App extends Component { +... +} + +``` + +## component propTypes -> static + +Example based on "Todo List" app + +**ES6**: +```js +class App extends Component { +... +} + +App.propTypes = { + visibleTodos: PropTypes.arrayOf(PropTypes.shape({ + text: PropTypes.string.isRequired, + completed: PropTypes.bool.isRequired + })), + visibilityFilter: PropTypes.oneOf([ + 'SHOW_ALL', + 'SHOW_COMPLETED', + 'SHOW_ACTIVE' + ]).isRequired +}; + +``` + +**ES7**: +```js +class App extends Component { + static propTypes = { + visibleTodos: PropTypes.arrayOf(PropTypes.shape({ + text: PropTypes.string.isRequired, + completed: PropTypes.bool.isRequired + })), + visibilityFilter: PropTypes.oneOf([ + 'SHOW_ALL', + 'SHOW_COMPLETED', + 'SHOW_ACTIVE' + ]).isRequired + }; + ... +} + +``` \ No newline at end of file diff --git a/docs/recipes/README.md b/docs/recipes/README.md index d8b5dc6ddc..3c83c8f16f 100644 --- a/docs/recipes/README.md +++ b/docs/recipes/README.md @@ -8,4 +8,4 @@ These are some use cases and code snippets to get you started with Redux in a re * [Writing Tests](WritingTests.md) * [Computing Derived Data](ComputingDerivedData.md) * [Implementing Undo History](ImplementingUndoHistory.md) - +* [Migrating to ES7](MigratingToES7.md)