使用沉浸式的反应状态管理

React应用依赖状态来追踪应用数据。状态会随着用户交互而改变。当状态改变时，我们需要更新用户界面显示的状态，这通常使用React的setState方法实现。

由于React的状态是不可变的（不能直接修改），当状态变得复杂时，更新状态会变得非常棘手，难以理解和维护。

这就是Immer发挥作用的地方。本文将探讨如何使用Immer简化React状态管理。Immer使用“draft”（草稿）的概念，你可以把它理解为状态的副本，而不是状态本身。你可以想象Immer对状态执行了复制操作，然后在一个安全的地方进行修改，而不会影响原始状态。所有更新都在draft上进行，只有draft中发生改变的部分才会更新到实际状态中。

例如，你的应用状态如下：

this.state = {
  name: 'Kunle',
  age: 30,
  city: 'Lagos',
  country: 'Nigeria'
}

如果用户庆祝31岁生日，我们需要更新age的值。使用Immer，会创建一个状态副本（draft）。

想象一下，这个副本被交给一个信使，信使将副本交给Kunle。现在有两个副本：当前状态和交给Kunle的draft副本。Kunle将draft中的age修改为31。然后，信使将修改后的draft返回应用，应用比较两个版本，只更新age，因为这是draft中唯一改变的部分。

这种方式不会破坏不可变状态的原则，因为当前状态不会被直接修改。Immer简化了不可变状态的管理。

实践示例：交通灯

让我们用Immer构建一个简单的交通灯应用。

使用Immer，组件代码如下：

const {produce} = immer;

class App extends React.Component {
  state = {
    red: 'red', 
    yellow: 'black', 
    green: 'black',
    next: "yellow"
  };

  componentDidMount() {
    this.interval = setInterval(() => this.changeHandle(), 3000);
  }

  componentWillUnmount()  {
    clearInterval(this.interval);
  }

  handleRedLight = () => {
    this.setState(
      produce(draft => {
        draft.red = 'red';
        draft.yellow = 'black';
        draft.green = 'black';
        draft.next = 'yellow';
      })
    );
  };

  handleYellowLight = () => {
    this.setState(
      produce(draft => {
        draft.red = 'black';
        draft.yellow = 'yellow';
        draft.green = 'black';
        draft.next = 'green';
      })
    );
  };

  handleGreenLight = () => {
    this.setState(
      produce(draft => {
        draft.red = 'black';
        draft.yellow = 'black';
        draft.green = 'green';
        draft.next = 'red';
      })
    );
  };

  changeHandle = () => {
    if (this.state.next === 'yellow') {
      this.handleYellowLight();
    } else if (this.state.next === 'green') {
      this.handleGreenLight();
    } else {
      this.handleRedLight();
    }
  };

  render() {
    return (
      <div classname="box">
        <div classname="circle" style="{{backgroundColor:" this.state.red></div>
        <div classname="circle" style="{{backgroundColor:" this.state.yellow></div>
        <div classname="circle" style="{{backgroundColor:" this.state.green></div>
      </div>
    );
  }
}

produce是Immer提供的默认函数。我们将其作为参数传递给setState方法。produce函数接收一个函数，该函数接受draft作为参数。在这个函数内部，我们可以修改draft副本。

更简洁的写法：

const handleLight = (state) => {
  return produce(state, (draft) => {
    draft.red = 'black';
    draft.yellow = 'black';
    draft.green = 'green';
    draft.next = 'red';
  });
};

// 在组件中使用：
handleGreenLight = () => {
  const nextState = handleLight(this.state);
  this.setState(nextState);
};

我们把当前状态和接受draft作为参数的函数传递给produce函数。

另一个例子：购物清单

如果你使用过React一段时间，你应该熟悉扩展运算符（spread operator）。使用Immer，特别是处理数组状态时，你不需要使用扩展运算符。

让我们创建一个购物清单应用来进一步说明这一点。

组件代码：

class App extends React.Component {
  // ... (constructor and other methods) ...

  handleSubmit = (e) => {
    e.preventDefault();
    const newItem = {
      id: uuid.v4(),
      name: this.state.name,
      price: this.state.price
    };
    this.setState(
      produce(draft => {
        draft.list = draft.list.concat(newItem);
      })
    );
  };

  // ... (render method) ...
}

添加新商品时，我们需要更新清单状态。使用setState和扩展运算符：

handleSubmit = (e) => {
  // ...
  this.setState({ list: [...this.state.list, newItem] });
};

如果需要更新多个状态，使用扩展运算符会变得非常复杂。使用Immer，这变得非常简单。

如果我们想在状态更新后调用回调函数呢？例如，我们想计算清单中商品的总价。

handleSubmit = (e) => {
  // ...
  this.setState(
    produce(draft => {
      draft.list = draft.list.concat(newItem);
    }), () => {
      this.calculateAmount(this.state.list);
    }
  );
};

calculateAmount = (list) => {
  let total = 0;
  list.forEach(item => total  = item.price);
  this.setState(
    produce(draft => {
      draft.totalAmount = total;
    })
  );
};

回调函数在状态更新后被调用，并且使用更新后的状态。

Immer Hooks

use-immer是一个hook，允许你在React应用中管理状态。让我们用一个简单的计数器示例来演示：

import React from "react";
import {useImmer} from "use-immer";

const Counter = () => {
  const [count, updateCounter] = useImmer({ value: 0 });

  function increment() {
    updateCounter(draft => {
      draft.value  ;
    });
  }

  return (
    <div>
      <h1 id="Counter-count-value">Counter {count.value}</h1>
      <button onclick="{increment}">Increment</button>
    </div>
  );
};

export default Counter;

useImmer类似于useState。它返回状态和一个更新函数。组件加载时，状态值与传递给useImmer的值相同。使用返回的更新函数，我们可以创建一个increment函数来增加计数器的值。

Immer还提供了一个类似useReducer的hook：useImmerReducer。

总结

你可以开始在你的下一个项目中使用Immer，或者逐步将其应用到当前项目中。它简化了React状态管理。 代码示例可以在GitHub上找到。（请提供GitHub链接，如果存在的话）

以上是使用沉浸式的反应状态管理的详细内容。更多信息请关注PHP中文网其他相关文章！