react-redux 中的奇怪按钮行为

Question

我在 react-redux 中有一个简单的计数器，我用它来学习如何使用这些框架。我正在尝试实现一对确定递增/递减动作对的有效负载的数字输入。

预期的结果是我在两个输入字段中都输入了一个数字，当我单击递增/递减按钮时，计数器会按指定的量上升或下降。 实际上发生的是，递增按钮只是将数字连接到计数器值的末尾，而递减按钮的行为与预期相同。例如：

这里的预期行为是我将按下+，计数器将变为 5，然后如果我按下-，它将下降到 -5。

在这里我按了两次+。如您所见，计数器并没有像您预期的那样增加到 10，而是将 5 连接到存储中的值上，而不是添加。

在这里我按了一次-。前导零消失了，数字按预期减少了 10。

守则：

作为 Redux，它有点样板，但这是我的代码：

src/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，它显示按下 + 后的状态由于某种原因被视为字符串：

但我不知道为什么！

任何帮助将不胜感激。 干杯。

Answer 1

您应该先将有效载荷转换为数字：

return state + Number(action.payload);

否则结果是一个组合字符串。

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