xxx

redux/1/src/App.js

@@ -1,8 +1,7 @@
 // import logo from './logo.svg';
 // import './App.css';
+// import RouterComponent from './router'
 import React from 'react';
-import RouterComponent from './router'
-
 function App() {
   return (
     <React.Fragment>

redux/1/src/index.js

@@ -1,17 +1,25 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
-import App from './App';
+import RouterComponent from './router'
 import reportWebVitals from './reportWebVitals';
 import {createStore} from 'redux'
+import {Provider} from 'react-redux'
+//2 商品装车
 function counterReducer(state={count:0},action){
-  console.log(state)
-  return state
+  if(action.data){
+    state.count=action.data.count
+  }
+  return {...state,...action.data}
 }
+// 3 存入仓库
 let store=createStore(counterReducer);
 ReactDOM.render(
   <React.StrictMode>
-    <App />
+    <Provider store={store}>
+      <RouterComponent />
+    </Provider>
+    
   </React.StrictMode>,
   document.getElementById('root')
 );

redux/1/src/page/home.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import {connect} from 'react-redux'
 class Home extends React.Component{
     constructor(){
         super();
@@ -7,15 +8,18 @@ class Home extends React.Component{
     }
     incCount(){
         console.log(++this.num);
-        this.props.dispatch({type:'INC',data:{count:this.num}})
+        // 1 选购商品 触发action
+        this.props.dispatch({type:'INC',data:{count:++this.num}})
+    }
+    outCount(){
+        this.props.dispatch({type:'INC',data:{count:--this.num}})
     }
     render(){
         return(
             <div>
-                <h1>1</h1>
-                <h1>this is Home</h1>
+                <h1>{this.props.state.count}</h1>
                 <li>
-                    <button type="button">减少</button>
+                    <button type="button" onClick={this.outCount.bind(this)}>减少</button>
                 </li>
                 <li>
                     <button type="button" onClick={this.incCount.bind(this)}>增加</button>
@@ -24,4 +28,8 @@ class Home extends React.Component{
         )
     }
 }
-export default Home
+export default connect((state)=>{
+    return{
+        state:state
+    }
+})(Home)