计算器逻辑完成

calc/src/components/calculator/digitButtton.jsx

@@ -0,0 +1,22 @@
+import React, { Component } from 'react';
+import ACTIONS from '../../redux/action';
+import {connect} from 'react-redux';
+
+class DigitButton extends Component {
+    state = {  } 
+    render() { 
+        return (<button onClick={() => this.props.add_digit(this.props.digit)}>{this.props.digit}</button>);
+    }
+}
+
+const mapDispatchToProps = {
+    add_digit: digit => {
+        return  {
+            type: ACTIONS.ADD_DIGIT,
+            digit: digit,
+        }
+    }
+};
+
+
+export default connect(null,mapDispatchToProps)(DigitButton);

calc/src/components/calculator/operatorButton.jsx

@@ -0,0 +1,21 @@
+import React, { Component } from 'react';
+import {connect} from 'react-redux';
+import ACTIONS from '../../redux/action';
+
+class OperatorButton extends Component {
+    state = {  } 
+    render() { 
+        return (<button onClick={() => this.props.choose_operation(this.props.operator)}>{this.props.operator}</button>);
+    }
+}
+ 
+const mapDispatchToProps = {
+    choose_operation: operator => {
+        return  {
+            type: ACTIONS.CHOOSE_OPERATION,
+            operator: operator,
+        }
+    }
+};
+
+export default connect(null,mapDispatchToProps)(OperatorButton);

calc/src/components/content/calc.jsx

@@ -1,39 +1,70 @@
 import React, { Component } from 'react';
 import Base from './base';
+import {connect} from 'react-redux';
+import DigitButton from '../calculator/digitButtton';
+import ACTIONS from '../../redux/action';
+import OperatorButton from '../calculator/operatorButton';
 
 class Calc extends Component {
-    state = {  } 
+    state = {
+        formatter: Intl.NumberFormat("en-us"),
+      } 
+    
+    format = number => {
+        if (number === "除数不能为0") {
+            return "除数不能为0"
+        }
+        if (number === "") {
+            return ""
+        }
+
+        const [integer,decimal] = number.split('.');
+        
+        if (decimal === undefined) {
+            return this.state.formatter.format(integer);
+        }
+        return `${this.state.formatter.format(integer)}.${decimal}`;
+      }
+      
+    
     render() { 
         return (
             <Base>
                 <div className="calc">
                     <div className="output">
-                        <div className="last-output">1</div>
+                        <div className="last-output">
-                        <div className="currrent-output">1111</div>
+                            {this.format(this.props.lastValue)} {this.props.operator}
+                        </div>
+                        <div className="currrent-output">
+                            {this.format(this.props.currentValue)}
+                        </div>
                     </div>
 
-                    <button className='button-ac'>AC</button>
+                    <button className='button-ac' onClick={this.props.clear}>AC</button>
-                    <button>Del</button>
+                    <button onClick={this.props.delete_digit}>Del</button>
-                    <button>/</button>
+
+                    <OperatorButton operator={"÷"}></OperatorButton>
+
+                    <DigitButton digit={"7"}/>
+                    <DigitButton digit={"8"}/>
+                    <DigitButton digit={"9"}/>
+                    <OperatorButton operator={"×"}></OperatorButton>
 
-                    <button>7</button>
-                    <button>8</button>
-                    <button>9</button>
-                    <button>*</button>
 
-                    <button>4</button>
+                    <DigitButton digit={"4"}/>
-                    <button>5</button>
+                    <DigitButton digit={"5"}/>
-                    <button>6</button>
+                    <DigitButton digit={"6"}/>
-                    <button>-</button>
+                    <OperatorButton operator={"-"}></OperatorButton>
 
-                    <button>1</button>
-                    <button>2</button>
-                    <button>3</button>
-                    <button>+</button>
 
-                    <button>0</button>
+                    <DigitButton digit={"1"}/>
-                    <button>.</button>
+                    <DigitButton digit={"2"}/>
-                    <button className='button-equal'>=</button>
+                    <DigitButton digit={"3"}/>
+                    <OperatorButton operator={"+"}></OperatorButton>
+
+                    <DigitButton digit={"0"}/>
+                    <DigitButton digit={"."}/>
+                    <button className='button-equal' onClick={this.props.evaluate}>=</button>
 
 
                 </div>
@@ -41,5 +72,30 @@ class Calc extends Component {
         );
     }
 }
+const mapStateToProps = (state,props) => {
+    return {
+        lastValue: state.lastValue,
+        currentValue: state.currentValue,
+        operator: state.operator
+    }
+}
+
+const mapDispatchToProps = {
+    clear: () => {
+        return {
+            type: ACTIONS.CLEAR,
+        }
+    },
+    delete_digit: () => {
+        return {
+            type: ACTIONS.DELETE_DIGIT,
+        }
+    },
+    evaluate: () => {
+        return {
+            type: ACTIONS.EVALUATE,
+        }
+    }
+}
  
-export default Calc;
+export default connect(mapStateToProps,mapDispatchToProps)(Calc);

calc/src/components/navbar.jsx

@@ -1,6 +1,5 @@
 import React, { Component } from 'react';
 import { Link } from 'react-router-dom';
-
 class NavBar extends Component {
     state = {  } 
     render() { 
@@ -11,21 +10,21 @@ class NavBar extends Component {
                     <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
                         <span className="navbar-toggler-icon"></span>
                     </button>
-                    <div className="collapse navbar-collapse" id="navbarNav">
+                    <div className="collapse navbar-collapse" id="navbarText">
                     <ul className="navbar-nav me-auto mb-2 mb-lg-0 ">
                         <li className="nav-item">
-                        <Link className="nav-link active" to="/home">首页</Link>
+                        <Link className="navbar-brand" to="/home">首页</Link>
                         </li>
                         <li className="nav-item">
-                        <Link className="nav-link active" to="/calc">计算器</Link>
+                        <Link className="navbar-brand" to="/calc">计算器</Link>
                         </li>
                     </ul>
                     <ul className="navbar-nav">
-                        <li className="nav-item ">
+                        <li className="nav-item">
-                        <Link className="nav-link active" to='/login'>登录</Link>
+                        <Link className="navbar-brand" to='/login'>登录</Link>
                         </li>
                         <li className="nav-item ">
-                        <Link className="nav-link active" to='/register'>注册</Link>
+                        <Link className="navbar-brand" to='/register'>注册</Link>
                         </li>
                     </ul>
                     </div>

calc/src/index.css

@@ -30,12 +30,12 @@ body {
 
 .last-output {
   font-size: 20px;
-  color: blue;
+  color: black;
 }
 
 .currrent-output {
   font-size: 3rem;
-  color: red;
+  color: black;
 }
 
 .button-ac {

calc/src/index.js

@@ -1,15 +1,20 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
-import 'bootstrap/dist/css/bootstrap.css'
+import 'bootstrap/dist/css/bootstrap.css';
 import { BrowserRouter } from 'react-router-dom';
 import App from './components/app';
+import 'bootstrap/dist/js/bootstrap';
+import { Provider } from 'react-redux';
+import store from './redux/store';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
+  <Provider store={store}>
     <BrowserRouter>
       <App></App>
     </BrowserRouter>
+  </Provider>
 );
 
 

calc/src/redux/action.js

@@ -0,0 +1,9 @@
+const ACTIONS = {
+    ADD_DIGIT: "add_digit",
+    DELETE_DIGIT: "delete_digit",
+    CHOOSE_OPERATION: "choose-operation",
+    CLEAR: "clear",
+    EVALUATE: "evaluate",
+}
+
+export default ACTIONS;

calc/src/redux/reducer.js

@@ -0,0 +1,170 @@
+import ACTIONS from "./action";
+
+
+const evaluate = state => {
+    let { currentValue, lastValue, operator } = state;
+    currentValue = parseFloat(currentValue);
+    lastValue = parseFloat(lastValue);
+    let ans = "";
+    switch (operator) {
+        case "+": {
+            ans = lastValue + currentValue;
+            break;
+        }
+
+        case "-": {
+            ans = lastValue - currentValue;
+            break;
+        }
+
+        case "×": {
+            ans = lastValue * currentValue;
+            break;
+        }
+
+        case "÷": {
+            ans = lastValue / currentValue;
+            break;
+        }
+        default:
+            break;
+    }
+    return ans.toString();
+}
+
+const reducer = (
+    state = {
+        lastValue: "",
+        currentValue: "",
+        operator: "",
+        overWrite: false,
+    }, action) => {
+    switch (action.type) {
+        case ACTIONS.ADD_DIGIT: {
+            if (state.overWrite) {
+                state.currentValue = "";
+                state.overWrite = false;
+            }
+
+            if (state.currentValue === '0' && action.digit === '0')
+                return state;
+            if (state.currentValue === '0' && action.digit !== '.')
+                return {
+                    ...state,
+                    currentValue: action.digit,
+                }
+            if (action.digit === '.' && state.currentValue.includes('.')) {
+                return state;
+            }
+            if (action.digit === '.' && state.currentValue === "") {
+                return {
+                    ...state,
+                    currentValue: "0.",
+                }
+            }
+            return {
+                ...state,
+                currentValue: state.currentValue + action.digit,
+            }
+        }
+
+        case ACTIONS.DELETE_DIGIT:
+            {
+                if (state.overWrite) {
+                    return {
+                        ...state,
+                        currentValue: "",
+                        overWrite: false,
+                    }
+                }
+                if (state.currentValue === '') {
+                    return state;
+                }
+
+                return {
+                    ...state,
+                    currentValue: state.currentValue.slice(0, -1), // 删除最后一个元素
+                }
+            }
+
+        case ACTIONS.CHOOSE_OPERATION:
+            {
+                if (state.currentValue === "" && state.lastValue === "") {
+                    return state;
+                }
+                if (state.lastValue === "") {
+                    return {
+                        ...state,
+                        lastValue: state.currentValue,
+                        operator: action.operator,
+                        currentValue: ""
+                    }
+                }
+
+                if (state.currentValue === "") {
+                    return {
+                        ...state,
+                        operator: action.operator,
+                    }
+                }
+                let ans = evaluate(state);
+                if (ans === "Infinity") {
+                    return {
+                        ...state,
+                        lastValue: "",
+                        operator: "",
+                        currentValue: "除数不能为0",
+                        overWrite: true
+                    }
+                }
+
+                return {
+                    ...state,
+                    lastValue: ans,
+                    operator: action.operator,
+                    currentValue: "",
+                }
+            }
+
+        case ACTIONS.EVALUATE:
+            {
+                if (state.currentValue === ""
+                    || state.lastValue === ""
+                    || state.operator === "")
+                    return state;
+
+                let ans = evaluate(state);
+                if (ans === "Infinity") {
+                    return {
+                        ...state,
+                        lastValue: "",
+                        operator: "",
+                        currentValue: "除数不能为0",
+                        overWrite: true
+                    }
+                }
+
+                return {
+                    ...state,
+                    currentValue: ans,
+                    operator: "",
+                    lastValue: "",
+                    overWrite: true,
+                }
+            }
+
+        case ACTIONS.CLEAR:
+            {
+                return {
+                    currentValue: "",
+                    lastValue: "",
+                    operator: "",
+                }
+            }
+        default:
+            return state;
+    }
+
+}
+
+export default reducer;

calc/src/redux/store.js

@@ -0,0 +1,8 @@
+import reducer from "./reducer";
+import {configureStore} from '@reduxjs/toolkit';
+
+const store = configureStore({
+    reducer
+});
+
+export default store;

redux/src/components/string.jsx

@@ -21,14 +21,43 @@ class String extends Component {
         );
     }
 }
+
+// 将store保存的state值绑定到this.props
+//    state
+//   /     \
+// string number
 const mapStateToProps = (state,props) => {
     return {
-        string: state.string,
+        string: state.string, // 将string的state值赋给props的string属性
     }
 }
 
+
+
+// reducer: 对当前数据进行操作： 返回操作之后的数据
+// 传入参数为 (state,action), 根据action对原数据state执行不同的操作
+// 例如下面的f1，原始数据为state=0，有增减两种操作
+// reducer: f1
+
+// const f1 = (state = 0, action) => {
+//     switch (action.type) {
+//         case 'add':
+//             return state + action.value;
+//         case 'sub':
+//             return state - action.value;
+//         default:
+//             return state;
+//     }
+// }
+
+
+// String组件想修改Number组件中的值
+// dispatch会递归调用所有reducer函数
+
 const mapDispatchToProps = {
+    // 绑定到props的add中
     add: (n) => {
+        // dispatch中传入的action
         return {
             type: 'add',
             value: n,
@@ -42,4 +71,5 @@ const mapDispatchToProps = {
     }
 }
 
+// 使用connet绑定String组件并返回一个新组件
 export default connect(mapStateToProps,mapDispatchToProps)(String);

redux/src/index.js

@@ -7,7 +7,7 @@ import App from './components/app.jsx';
 import { Provider } from 'react-redux';
 
 
-// 数字操作
+// reducer: f1
 const f1 = (state = 1, action) => {
     switch (action.type) {
         case 'add':
@@ -19,7 +19,7 @@ const f1 = (state = 1, action) => {
     }
 }
 
-// 字符操作
+// reducer: f2
 const f2 = (state = 'hhh', action) => {
     switch (action.type) {
         case 'concat':
@@ -29,13 +29,13 @@ const f2 = (state = 'hhh', action) => {
     }
 }
 
-
+// 将f1和f2作为f3的子节点，数据一般保存在叶节点
 const f3 = combineReducers({
     number: f1,
     string: f2,
 });
 
-
+// 保存整个虚拟dom树的根节点
 const store = configureStore({
     reducer: f3,
 })
@@ -45,6 +45,8 @@ const store = configureStore({
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
+    // 要在组件中使用redux，必须用Provider将组件包住
+    // 全局状态树是定义在Provider组件上，每次store更新完之后，会重新渲染Provider组件及其子组件
     <Provider store={store}>
         <App></App>
     </Provider>

route/src/index.js

@@ -4,6 +4,7 @@ import './index.css';
 import App from './components/app';
 import { BrowserRouter } from 'react-router-dom'
 import 'bootstrap/dist/css/bootstrap.css'
+import 'bootstrap/dist/js/bootstrap'
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(