react-redux 中的奇怪按钮行为

Posted 2023-02-19

【中文标题】react-redux 中的奇怪按钮行为

【英文标题】：Strange button behaviour in react-redux

【发布时间】：2021-05-05 17:11:20

【问题描述】：

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

但我不知道为什么！

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

【问题讨论】：

value属性是一个字符串，所以需要用parseInt()或者Number()来解析。您是否有理由直接使用 document.getElementById() 而不是 controlling the value 从 DOM 节点获取值？另见：Glossary of React Terms - Controlled vs Uncontrolled Components

我认为你在做事上迈出了一大步，跳过了导致基本错误的基础。您正在使用 redux，一个更高级的工具，但没有使用受控输入元素，这是反应原则的基础

@cbr 我唯一的理由是我不知道其他方法 - 感谢您的链接，我会调查它。

@buzatto 我同意你的观点，不幸的是我的工作要求我快速学习这些东西，而我每周只有这么多时间进行个人开发，所以无法想象学习 html -> javascript -> React -> Redux，除非我想在两年内完成 :)

【参考方案1】：

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

return state + Number(action.payload);

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

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

【讨论】：

谢谢，我会的。但是有一个问题，为什么减量操作会按预期工作？

字符串没有 - 运算符，因此字符串值 (action.payload) 被强制转换为数字。