javascript 在Redux中使用action creators的主要好处是什么？

gg58donl 于 2023-06-28 发布在 Java

关注(0)|答案(1)|浏览(76)

假设我有一个input组件，它将从其onChange处理程序更新状态。

function updateInputState(newvalue) {
  return({
    type: "UPDATE_INPUT_STATE",
    payload: newValue
  });
}

function InputComponent(props) {
  
  function onChange(event) {
    const newValue = event.target.value;

    // OPTION #1 - WITHOUT AN ACTION CREATOR. DISPATCH THE ACTION DIRECTLY
    dispatch({
      type: "UPDATE_INPUT_STATE",
      payload: newValue
    });

    // OPTION #2 - WITH AN ACTION CREATOR
    dispatch(updateInputState(newValue));

  }

  return(
    <input value={props.value} onChange={onchange}/>
  );
}

我认为选项#2更具可读性，那么为什么我会使用操作创建器而不是常规的操作调度呢？

JavaScript

来源：https://stackoverflow.com/questions/63806936/what-is-the-main-benefit-of-using-action-creators-in-redux

1条答案

按热度按时间

elcex8rz1#

主要的好处是简单性和维护性，特别是在异步操作方面。
动作创建器也可以是异步的，并具有副作用。
因此，它简化了组件视图中的使用：

// Lets say we suddenly want to make updateInputState async action
function InputComponent(props) {
  function onChange(event) {
    const newValue = event.target.value;
    // Edit its action creator implementation
    dispatch(updateInputState(newValue));

    // on the other hand, without action creator, you need to
    // change this code to async everywhere across the app
    dispatch({
      type: "UPDATE_INPUT_STATE",
      payload: newValue,
    });
  }

  return <input value={props.value} onChange={onchange} />;
}

Dave Ceddia在维护方面提出了很好的观点：* “当你在多个地方复制和粘贴一个动作时，改变就更难了。"*
请注意，编写动作创建器更像是“旧API”，您现在应该使用redux-toolkit（2020年）。

赞(0）回复(0）举报 2023-06-28

我来回答

javascript 在Redux中使用action creators的主要好处是什么？

1条答案

相关问题

热门标签

最新问答