update 170420 20:12

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": {

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

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 (
+        <div>
+            <VisibleHello />
+            <ClickChange />
+        </div>
+    );
+};
+
+export default App;

Test/src/components/Change.js

@@ -0,0 +1,9 @@
+import React from 'react';
+
+const Change = ({buttonClick}) => {
+    return (
+        <button onClick={buttonClick}>change</button>
+    );
+};
+
+export default Change;

Test/src/components/Hello.js

@@ -0,0 +1,9 @@
+import React from 'react';
+
+const Hello = ({text, changeText}) => {
+    return (
+        <h1 onClick={changeText}>{text}</h1>
+    );
+};
+
+export default Hello;

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;

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;

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(
-    <Counter
-        value={store.getState()}
-        onIncrement={() => store.dispatch(Increment())}
-        onDecrement={() => store.dispatch(Decrement())}
-    />,
-    rootEl
+ReactDOM.render(
+    <Provider store={store}>
+        <App />
+    </Provider>,
+    document.getElementById('root')
 );
-
-render();
-store.subscribe(render);

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;

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