时间戳

首页 > 解决方案 > 如何简化我的减速器功能或简单的减速器功能应该多长时间？

javascript - 如何简化我的减速器功能或简单的减速器功能应该多长时间？

问题描述

我有一个减速器功能，其唯一目的是打开和关闭样式。这是一种全球风格，这就是它出现在我的 Redux 商店中的原因。

但是，对于这样一个简单的切换，代码看起来过于迟钝。

const Style = (state = {current: true}, action) => {
  if(action.type === "toggleAppStyle"){
    const newState = { ...state };
    newState.current = !state.current;
    return newState;
  }
  return state;
};

我最近意识到 redux 会为每个单独的操作运行所有 reducer 函数，我觉得这很奇怪，所以如果没有为特定的 reducer 调用 action.type，返回的状态必须等于初始状态。

这是我使用它的一个地方：

// ... snip
const mapStateToProps = state => {
  return {
    Style: state.Style
  }
}
  
  // ... snip
  render() {
    return (
      <img className = 'icon_all' 
           id = {this.props.Style.current === true ? 'icon_10' : 'icon_90'} 
           onClick = {this.clickHandler} src='/images/favicon-optimized.svg'/>
    )
  }

标签： javascriptreactjsreduxreact-redux

解决方案

对于这样一个简单的切换，代码看起来过于迟钝。

过于迟钝有点过分，这是一种非常标准的不可变更新模式，即浅拷贝到新对象引用并更新必要的属性。

它不能比您已经拥有的简单得多，但这里有一个直接返回新对象的示例。

const Style = (state = {current: true}, action) => {
  if (action.type === "toggleAppStyle") {
    return {
      ...state,
      current: !state.current,
    };
  }
  return state;
};

我最近意识到 redux 会为每个单独的操作运行所有 reducer 函数，我觉得这很奇怪，所以如果没有为特定的 reducer 调用 action.type，返回的状态必须等于初始状态。

这里真的没有什么奇怪的。reducer 函数要么作用于动作并作用于状态，从而返回一个新的状态引用和值，否则它只是简单地返回当前状态值。除了动作部分，这正是 React 协调工作的方式。当您更新状态时，您正在创建新的对象引用或原始值。这就是触发重新渲染的原因。

当然，如果您的目标是尽可能简短和简洁，您可以将状态切片缩减为布尔值，并使用三元运算符返回切换状态或当前状态值。相应地调整你的 redux 选择器。

const Style = (state = true, action) => action.type === "toggleAppStyle"
  ? !state
  : state;

推荐阅读