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';