diff --git a/spec/dummy/client/app/components/HelloWorldContainer.jsx b/spec/dummy/client/app/components/HelloWorldContainer.jsx index e0f01cd0d..6c5ec0c05 100644 --- a/spec/dummy/client/app/components/HelloWorldContainer.jsx +++ b/spec/dummy/client/app/components/HelloWorldContainer.jsx @@ -6,30 +6,22 @@ import HelloWorldRedux from './HelloWorldRedux'; import * as helloWorldActions from '../actions/HelloWorldActions'; -function select(state) { - // Which part of the Redux global state does our component want to receive as props? - return { data: state.helloWorldData }; -} - -class HelloWorldContainer extends React.Component { - static propTypes = { - dispatch: PropTypes.func.isRequired, - data: PropTypes.object.isRequired, - }; +const HelloWorldContainer = ({ actions, data }) => ( + +); - constructor(props, context) { - super(props, context); - } +HelloWorldContainer.propTypes = { + actions: PropTypes.object.isRequired, + data: PropTypes.object.isRequired, +}; - render() { - const { dispatch, data } = this.props; - const actions = bindActionCreators(helloWorldActions, dispatch); +function mapStateToProps(state) { + return { data: state.helloWorldData }; +} - return ( - - ); - } +function mapDispatchToProps(dispatch) { + return { actions: bindActionCreators(helloWorldActions, dispatch) }; } // Don't forget to actually use connect! -export default connect(select)(HelloWorldContainer); +export default connect(mapStateToProps, mapDispatchToProps)(HelloWorldContainer); diff --git a/spec/dummy/client/app/components/HelloWorldWithLogAndThrow.jsx b/spec/dummy/client/app/components/HelloWorldWithLogAndThrow.jsx index d2ac3aa74..16a4ea367 100644 --- a/spec/dummy/client/app/components/HelloWorldWithLogAndThrow.jsx +++ b/spec/dummy/client/app/components/HelloWorldWithLogAndThrow.jsx @@ -1,6 +1,7 @@ import React from 'react'; // Example of logging and throw error handling + class HelloWorldWithLogAndThrow extends React.Component { constructor(props, context) { super(props, context); diff --git a/spec/dummy/client/app/components/RouterFirstPage.jsx b/spec/dummy/client/app/components/RouterFirstPage.jsx index 8e44e0af2..961317ed0 100644 --- a/spec/dummy/client/app/components/RouterFirstPage.jsx +++ b/spec/dummy/client/app/components/RouterFirstPage.jsx @@ -1,16 +1,12 @@ import React from 'react'; -export default class RouterFirstPage extends React.Component { +const RouterFirstPage = () => ( +
+

React Router First Page

+

+ This page brought to you by React Router +

+
+); - render() { - return ( -
-

React Router First Page

-

- This page brought to you by React Router -

-
- ); - } - -} +export default RouterFirstPage; diff --git a/spec/dummy/client/app/components/RouterLayout.jsx b/spec/dummy/client/app/components/RouterLayout.jsx index e82c009ed..98435ecd8 100644 --- a/spec/dummy/client/app/components/RouterLayout.jsx +++ b/spec/dummy/client/app/components/RouterLayout.jsx @@ -1,39 +1,36 @@ import React from 'react'; import { Link } from 'react-router'; -export default class RouterLayout extends React.Component { - static propTypes = { - children: React.PropTypes.object, - }; +const RouterLayout = ({ children }) => ( +
+

React Router is working!

+

+ Woohoo, we can use react-router here! +

+
    +
  • + + React Router Layout Only + +
  • +
  • + + Router First Page + +
  • +
  • + + Router Second Page + +
  • +
+
+ {children} +
+); - render() { - return ( -
-

React Router is working!

-

- Woohoo, we can use react-router here! -

-
    -
  • - - React Router Layout Only - -
  • -
  • - - Router First Page - -
  • -
  • - - Router Second Page - -
  • -
-
- {this.props.children} -
- ); - } +RouterLayout.propTypes = { + children: React.PropTypes.object, +}; -} +export default RouterLayout; diff --git a/spec/dummy/client/app/components/RouterSecondPage.jsx b/spec/dummy/client/app/components/RouterSecondPage.jsx index 2f722aeff..0ee3ab8d8 100644 --- a/spec/dummy/client/app/components/RouterSecondPage.jsx +++ b/spec/dummy/client/app/components/RouterSecondPage.jsx @@ -1,16 +1,12 @@ import React from 'react'; -export default class RouterSecondPage extends React.Component { +const RouterSecondPage = () => ( +
+

React Router Second Page

+

+ This page brought to you by React Router +

+
+); - render() { - return ( -
-

React Router Second Page

-

- This page brought to you by React Router -

-
- ); - } - -} +export default RouterSecondPage; diff --git a/spec/dummy/client/app/startup/ClientReduxApp.jsx b/spec/dummy/client/app/startup/ClientReduxApp.jsx index dada00df5..8a3a939c5 100644 --- a/spec/dummy/client/app/startup/ClientReduxApp.jsx +++ b/spec/dummy/client/app/startup/ClientReduxApp.jsx @@ -2,9 +2,7 @@ // Compare this to the ./ServerApp.jsx file which is used for server side rendering. import React from 'react'; -import { combineReducers } from 'redux'; -import { applyMiddleware } from 'redux'; -import { createStore } from 'redux'; +import { combineReducers, applyMiddleware, createStore } from 'redux'; import { Provider } from 'react-redux'; import middleware from 'redux-thunk'; diff --git a/spec/dummy/client/app/startup/ServerReduxApp.jsx b/spec/dummy/client/app/startup/ServerReduxApp.jsx index 9576c90bc..8914f38e5 100644 --- a/spec/dummy/client/app/startup/ServerReduxApp.jsx +++ b/spec/dummy/client/app/startup/ServerReduxApp.jsx @@ -4,9 +4,7 @@ // render. import React from 'react'; -import { combineReducers } from 'redux'; -import { applyMiddleware } from 'redux'; -import { createStore } from 'redux'; +import { combineReducers, applyMiddleware, createStore } from 'redux'; import { Provider } from 'react-redux'; import middleware from 'redux-thunk'; diff --git a/spec/dummy/client/app/startup/ServerReduxSharedStoreApp.jsx b/spec/dummy/client/app/startup/ServerReduxSharedStoreApp.jsx index 8793042dd..7dc2c382b 100644 --- a/spec/dummy/client/app/startup/ServerReduxSharedStoreApp.jsx +++ b/spec/dummy/client/app/startup/ServerReduxSharedStoreApp.jsx @@ -12,7 +12,6 @@ import { Provider } from 'react-redux'; * React will see that the state is the same and not do anything. */ export default () => { - // This is where we get the existing store. const store = ReactOnRails.getStore('SharedReduxStore'); diff --git a/spec/dummy/client/app/startup/serverRegistration.jsx b/spec/dummy/client/app/startup/serverRegistration.jsx index 42e8ea366..d8e35ed71 100644 --- a/spec/dummy/client/app/startup/serverRegistration.jsx +++ b/spec/dummy/client/app/startup/serverRegistration.jsx @@ -23,7 +23,7 @@ import RouterApp from './ServerRouterApp'; import PureComponent from '../components/PureComponent'; -import SharedReduxStore from '../stores/SharedReduxStore' +import SharedReduxStore from '../stores/SharedReduxStore'; ReactOnRails.register({ HelloWorld, @@ -38,6 +38,5 @@ ReactOnRails.register({ }); ReactOnRails.registerStore({ - SharedReduxStore + SharedReduxStore, }); - diff --git a/spec/dummy/client/app/stores/SharedReduxStore.jsx b/spec/dummy/client/app/stores/SharedReduxStore.jsx index adbfecd71..3c9681d67 100644 --- a/spec/dummy/client/app/stores/SharedReduxStore.jsx +++ b/spec/dummy/client/app/stores/SharedReduxStore.jsx @@ -1,6 +1,4 @@ -import { combineReducers } from 'redux'; -import { applyMiddleware } from 'redux'; -import { createStore } from 'redux'; +import { combineReducers, applyMiddleware, createStore } from 'redux'; import middleware from 'redux-thunk'; import reducers from '../reducers/reducersIndex';