react-redux 中的奇怪按鈕行為

Question

我在 react-redux 中有一個簡單的計數器，我用它來學習如何使用這些框架。 我正在嘗試實現一對數字輸入，它們確定遞增/遞減操作對的有效負載。

預期的結果是我在兩個輸入字段中都輸入了一個數字，當我單擊遞增/遞減按鈕時，計數器會按指定的量上升或下降。 實際發生的是遞增按鈕只是將數字連接到計數器值的末尾，而遞減按鈕的行為與預期相同。 例如：

這里的預期行為是我將按下+並且計數器將 go 變為 5，然后如果我按下-它會將 go 降至 -5。

在這里，我按了+兩次。 如您所見，計數器並沒有像您預期的那樣上升到 10，而是 5 已連接到存儲中的值上，而不是相加。

在這里，我按下了-一次。 前導零消失了，數字按預期減少了 10。

編碼：

作為 Redux，它有點樣板，但這是我的代碼：

源代碼/App.js：

import React from 'react';
import {useSelector, useDispatch} from 'react-redux';
import {increment, decrement} from './actions/counterActions';

function App() {
  const counter = useSelector(state => state.counter);
  const dispatch = useDispatch();

  return (
    <div className="App">
      <h1>Counter: {counter}</h1>
      <input type = "number" id = "incrementAmount"></input>
      <br />
      <input type = "number" id = "decrementAmount"></input>
      <br />
      <button onClick = {() => dispatch(increment(document.getElementById("incrementAmount").value))}>+</button>
      <button onClick = {() => dispatch(decrement(document.getElementById("decrementAmount").value))}>-</button>
    </div>
  );
}

export default App;

src/index.js：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { createStore } from 'redux';
import allReducers from './reducers/';
import { Provider } from 'react-redux';

const devToolsExtension = window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__();

let store = createStore(allReducers, devToolsExtension);

store.subscribe(() => console.log("State: ", store.getState()));

ReactDOM.render(
  <React.StrictMode>
    <Provider store = {store}>
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

src/actions/counterActions.js：

export const increment = (incrementAmount) => {
    return {
      type: "INCREMENT",
      payload: incrementAmount
    };
  }
  
export const decrement = (decrementAmount) => {
    return {
      type: "DECREMENT",
      payload: decrementAmount
    };
  }

src/actions/index.js：

import {combineReducers} from 'redux';
import counterReducer from './counterReducer'

const allReducers = combineReducers({counter: counterReducer});

export default allReducers;

src/reducers/counterReducer.js：

const counterReducer = (state = 0, action) => {
    switch (action.type) {
      case "INCREMENT":
        return state + action.payload;
      case "DECREMENT":
        return state - action.payload;
      default:
        console.warn("Action type not recognised: ", action.type);
        return state;
    }
  };
  
  export default counterReducer;

到目前為止，我已經嘗試使用 Redux DevTools，這表明按下 + 后的 state 由於某種原因被視為字符串：

但我不知道為什么！

任何幫助將非常感激。 干杯。

Answer 1

您應該首先將有效負載轉換為數字：

return state + Number(action.payload);

否則結果是一個組合字符串。

工作樣本： https://codesandbox.io/s/relaxed-minsky-ptcp3?file=/src/App.js