diff --git a/Test/package.json b/Test/package.json index 0e0c5f0..a6c554a 100644 --- a/Test/package.json +++ b/Test/package.json @@ -9,6 +9,7 @@ "jquery": "^3.1.1", "react": "^15.4.2", "react-dom": "^15.4.2", + "react-redux": "^5.0.4", "redux": "^3.6.0" }, "scripts": { diff --git a/Test/src/actions/index.js b/Test/src/actions/index.js index 8f07514..b8ba5da 100644 --- a/Test/src/actions/index.js +++ b/Test/src/actions/index.js @@ -1,11 +1,11 @@ -export const Increment = () => { +export const changeText = () => { return { - type: 'INCREMENT' + type: 'CHANGE_TEXT' }; }; -export const Decrement = () => { +export const buttonClick = () => { return { - type: 'DECREMENT' + type: 'BUTTON_CLICK' }; }; diff --git a/Test/src/components/App.js b/Test/src/components/App.js new file mode 100644 index 0000000..3cbe157 --- /dev/null +++ b/Test/src/components/App.js @@ -0,0 +1,14 @@ +import React from 'react'; +import VisibleHello from '../containers/VisibleHello'; +import ClickChange from '../containers/ClickChange'; + +const App = () => { + return ( +
+ + +
+ ); +}; + +export default App; diff --git a/Test/src/components/Change.js b/Test/src/components/Change.js new file mode 100644 index 0000000..8927a32 --- /dev/null +++ b/Test/src/components/Change.js @@ -0,0 +1,9 @@ +import React from 'react'; + +const Change = ({buttonClick}) => { + return ( + + ); +}; + +export default Change; diff --git a/Test/src/components/Hello.js b/Test/src/components/Hello.js new file mode 100644 index 0000000..d3e3302 --- /dev/null +++ b/Test/src/components/Hello.js @@ -0,0 +1,9 @@ +import React from 'react'; + +const Hello = ({text, changeText}) => { + return ( +

{text}

+ ); +}; + +export default Hello; diff --git a/Test/src/containers/ClickChange.js b/Test/src/containers/ClickChange.js new file mode 100644 index 0000000..42859b7 --- /dev/null +++ b/Test/src/containers/ClickChange.js @@ -0,0 +1,18 @@ +import { connect } from 'react-redux'; +import Change from '../components/Change'; +import { buttonClick } from '../actions'; + +function mapDispatchToProps(dispatch) { + return { + buttonClick: () => { + dispatch(buttonClick()); + } + }; +} + +const ClickChange = connect( + null, + mapDispatchToProps +)(Change); + +export default ClickChange; diff --git a/Test/src/containers/VisibleHello.js b/Test/src/containers/VisibleHello.js new file mode 100644 index 0000000..a1e3713 --- /dev/null +++ b/Test/src/containers/VisibleHello.js @@ -0,0 +1,24 @@ +import { connect } from 'react-redux'; +import Hello from '../components/Hello'; +import { changeText } from '../actions'; + +function mapStateToProps(state) { + return { + text: state.text + }; +} + +function mapDispatchToProps(dispatch) { + return { + changeText: () => { + dispatch(changeText()); + } + }; +} + +const VisibleHello = connect( + mapStateToProps, + mapDispatchToProps +)(Hello); + +export default VisibleHello; diff --git a/Test/src/index.js b/Test/src/index.js index ddfdca6..9e10504 100644 --- a/Test/src/index.js +++ b/Test/src/index.js @@ -1,21 +1,15 @@ import React from 'react'; import ReactDOM from 'react-dom'; -import { createStore } from 'redux'; -import Counter from './components/Counter'; -import counter from './reducers'; -import { Increment, Decrement } from './actions'; +import { createStore, bindActionCreators } from 'redux'; +import { Provider } from 'react-redux'; +import myApp from './reducers'; +import App from './components/App'; -const store = createStore(counter); -const rootEl = document.getElementById('root'); +let store = createStore(myApp); -const render = () => ReactDOM.render( - store.dispatch(Increment())} - onDecrement={() => store.dispatch(Decrement())} - />, - rootEl +ReactDOM.render( + + + , + document.getElementById('root') ); - -render(); -store.subscribe(render); diff --git a/Test/src/reducers/index.js b/Test/src/reducers/index.js index 8fc29ea..a64c205 100644 --- a/Test/src/reducers/index.js +++ b/Test/src/reducers/index.js @@ -1,10 +1,22 @@ -export default (state = 0, actions) => { - switch (actions.type) { - case 'INCREMENT': - return state + 1; - case 'DECREMENT': - return state - 1; +const initialState = { + text: 'Hello' +}; + +const myApp = (state = initialState, action) => { + switch (action.type) { + case 'CHANGE_TEXT': + return { + text: state.text === 'Hello' ? 'Stark' : 'Hello' + }; + case 'BUTTON_CLICK': + return { + text: 'you just click button' + }; default: - return state; + return { + text: 'Hello' + }; } -}; +} + +export default myApp; diff --git a/react-redux-es6-quickstart/index.js b/react-redux-es6-quickstart/index.js index ebddbdd..5335802 100644 --- a/react-redux-es6-quickstart/index.js +++ b/react-redux-es6-quickstart/index.js @@ -1,7 +1,7 @@ import React, { Component } from 'react'; import ReactDOM from 'react-dom'; import { createStore, bindActionCreators } from 'redux'; -import { Provider, connect } from 'react-redux'; +import { Provider } from 'react-redux'; import myApp from './reducers'; import App from './components/App';