Redux

redux/src/components/app.jsx

@@ -0,0 +1,21 @@
+import React, { Component } from 'react';
+import Number from './number';
+import String from './string';
+import 'bootstrap/dist/css/bootstrap.css';
+
+class App extends Component {
+    state = {  } 
+    render() { 
+        return (
+            <React.Fragment>
+                <div className="container">
+                    <Number></Number>
+                    <hr />
+                    <String></String>
+                </div>
+            </React.Fragment>
+        );
+    }
+}
+ 
+export default App;

redux/src/components/number.jsx

@@ -0,0 +1,35 @@
+import React, { Component } from 'react';
+import {connect} from 'react-redux';
+class Number extends Component {
+    state = {  } 
+    handleClick = () => {
+        this.props.concat('h');
+    }
+    render() { 
+        console.log(this.props)
+        return (
+            <React.Fragment>
+                <h3>Number组件: </h3>
+                <div>{this.props.number}</div>
+                <button className='btn btn-danger' onClick={this.handleClick}>添加字符</button>
+            </React.Fragment>
+        );
+    }
+}
+
+const mapStateToProps = (state,props) => {
+    return {
+        number: state.number,
+    }
+}
+ 
+const mapDispatchToProps = {
+    concat: (c) => {
+        return {
+            type: 'concat',
+            character: c,
+        }
+    }
+}
+
+export default connect(mapStateToProps,mapDispatchToProps)(Number);

redux/src/components/string.jsx

@@ -0,0 +1,45 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+
+class String extends Component {
+    state = {  } 
+    handleAdd = () => {
+        this.props.add(10);
+    }
+
+    handleSub = () => {
+        this.props.sub(20);
+    }
+    render() { 
+        return (
+            <React.Fragment>
+                <h3>String组件: </h3>
+                <div>{this.props.string}</div>
+                <button className='btn btn-success' style={{marginRight: "10px"}} onClick={this.handleAdd}>add</button>
+                <button className='btn btn-info' onClick={this.handleSub}>sub</button>
+            </React.Fragment>
+        );
+    }
+}
+const mapStateToProps = (state,props) => {
+    return {
+        string: state.string,
+    }
+}
+
+const mapDispatchToProps = {
+    add: (n) => {
+        return {
+            type: 'add',
+            value: n,
+        }
+    },
+    sub: (n) => {
+        return {
+            type: 'sub',
+            value: n,
+        }
+    }
+}
+
+export default connect(mapStateToProps,mapDispatchToProps)(String);

redux/src/index.js

@@ -3,9 +3,12 @@ import ReactDOM from 'react-dom/client';
 import './index.css';
 import { configureStore } from '@reduxjs/toolkit';
 import { combineReducers } from '@reduxjs/toolkit';
+import App from './components/app.jsx';
+import { Provider } from 'react-redux';
+
 
 // 数字操作
-const f1 = (state = 0, action) => {
+const f1 = (state = 1, action) => {
     switch (action.type) {
         case 'add':
             return state + action.value;
@@ -17,7 +20,7 @@ const f1 = (state = 0, action) => {
 }
 
 // 字符操作
-const f2 = (state='',action) => {
+const f2 = (state = 'hhh', action) => {
     switch (action.type) {
         case 'concat':
             return state + action.character;
@@ -25,19 +28,11 @@ const f2 = (state='',action) => {
             return state;
     }
 }
-// // 组合f1和f2，f1和f2作为叶子节点
-// const f3 = (state={},action) => {
-//     return {
-//         f1: f1(state.f1,action),
-//         f2: f2(state.f2,action),
-//     }
-// }
 
-// 和上述函数的作用相同
 
 const f3 = combineReducers({
-    f1: f1,
+    number: f1,
-    f2: f2,
+    string: f2,
 });
 
 
@@ -45,22 +40,12 @@ const store = configureStore({
     reducer: f3,
 })
 
-store.subscribe(() => {console.log(store.getState())})
-
-store.dispatch({type: "add", value: 10})
-store.dispatch({type: "add", value: 10})
-store.dispatch({type: "add", value: 20})
-store.dispatch({type: "add", value: 20})
-store.dispatch({type: "sub", value: 100})
-store.dispatch({type: "sub", value: 100})
-
-store.dispatch({type: "concat", character: "hhh"})
-store.dispatch({type: "concat", character: "ccc"})
 
 
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
-    <React.StrictMode>
+    <Provider store={store}>
-    </React.StrictMode>
+        <App></App>
+    </Provider>
 );