当业务逻辑在组件外部时 React 组件中的状态管理

Question

有！ App 组件是三个不同组件的容器：

Map 渲染地图，上面有视觉标记代表用户提供的地址。
List 组件包含所有添加的地址作为列表项。
Input 允许用户添加新地址（在我的术语中称为 LocationPoint）。

现在，App 使用所有这些地址 (LocationPoints) 将 locations 数组保持在状态，并将该数组传递给所有子组件。

使用 LocationPoints (add/move/update/deleteLocationPoint) 的操作被取出来分离函数，因为它们非常通用，以后可以在其他地方重用。

但是因为这些函数不知道状态的存在，所以我必须创建某种 "provider" 函数来调用这些操作（addLocationPoint、deleteLocationPoint 等）。例如。 addLocationPoint 必须在 App.addLocationPoint.

内部调用 func

下面的例子应该能更好地解释我在说什么。注意：代码段不起作用，因为它不是真正的实现。

// Adds a new location point
const addLocactionPoint = (locations: array, address: string) => {
  // ...
  return updatedLocations;
}

class App extends React.Component {
  constructor() {
    this.state = {
      locations: [],
    }

    // bind addLocPoint, etc.
  }

  addLocPoint(address) {
    this.setState(state => {
      addLocactionPoint(state.locations, address);
    });
  }

  // ...

  render() {
    return (
      <Input onSubmit={ this.addLocPoint } />
      <List 
        onDrag={ this.moveLocPoint }
        onDelete={ this.deleteLocPoint } 
      />
      <Map data={ this.state.locations } />
    );
  }
}

我的方法可以被认为是一种好的做法吗？或者还有其他方法可以减少 App 组件中的逻辑量并避免在不使用状态管理库（MobX、Redux 等）的情况下创建那些 "providers"。也许我考虑的情况是引入 Redux 或 MobX 的合适时机？

我将非常感谢您提供有关此问题的建议或建议或链接。

Answer 1

这已经足够好了，这是在没有状态管理库的普通 React 中通常维护全局状态的方式。上下文 API 还可用于将状态传递给嵌套组件。

可以改变的是更新状态的函数实际上可以被提取并用作setState 高阶更新函数：

const addLocationPoint = (address) => ({ location }) => {
  // ...
  return updatedLocations;
}

class App extends React.Component {
  ...
  addLocPoint(address) {
    this.setState(addLocationPoint(address));
  }
  ...

Redux action creators 中使用了类似的想法。

为了让状态更新器提供真正的改进，它们必须被移动到另一个模块。在这种情况下，它们可以与使用它们的组件分开测试，并在使用它们的组件中使用 jest.mock 进行模拟。

当业务逻辑在组件外部时 React 组件中的状态管理

State management in React component when the business logic is outside of the component

javascript

reactjs

react-state-management