在 React 中保存本地状态

Question

在我的应用程序中，我使用了几个 Container 组件。在每个Container中，都有Buttons。

根据应用程序的state，Buttons 可点击（或不可点击）。 Button 是否被禁用，在每个 Container 的本地state 中进行管理。 可以保存和加载应用程序的结果和状态。

问题来了： 当我保存（或加载）应用程序时，很难从 每个 Container 中“提取”Buttons 的state。在全局 state (Redux) 中保存是相当容易的。

但是如何从每个 Container 和保存本地state，如何将其反馈给每个Container？

读取本地state 是通过父Component 管理的，它从子Component 调用方法。我知道这是一种反模式，但它确实有效。

export class SomeConmponent {
....

    onClickSaveProjecthandler(event) {
        const localStateProjectSettings = this.childProjectSettings.getLocalState();
        const localStateLayerFilter = this.childLayerFilter.getLocalState();

        return {
          "ProjectSettings": localStateProjectSettings,
          "Filter": localFilter
        };
      }


    render() {
        return(
            <ProjectSettingsContainer onRef={ref => (this.childProjectSettings = ref)}/>
        )
    }
}

有更好的建议吗？

Answer 1

正如您已经提到的，使用 redux 来获得单一事实是一个好主意。并且要将状态“反馈”回容器，您必须将状态和道具映射到您的组件。

这是一个来自官方文档的容器示例：

import { connect } from 'react-redux'
import { setVisibilityFilter } from '../actions'
import Link from '../components/Link'

const mapStateToProps = (state, ownProps) => {
  return {
    active: ownProps.filter === state.visibilityFilter
  }
}

const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    onClick: () => {
      dispatch(setVisibilityFilter(ownProps.filter))
    }
  }
}

const FilterLink = connect(
  mapStateToProps,
  mapDispatchToProps
)(Link)

export default FilterLink

连接完成了所有的魔法。

Answer 2

听起来你可以使用 Redux，但不知何故，你误解了它的架构只是 global 状态的同义词。制作 Redux 的原因之一是解决保存多个独立组件的状态的问题。

但是，这里有一个完全不同的答案：为什么不使用全局状态序列化器并将每个组件连接到它？如果您不喜欢引用全局变量的想法，更好的选择是创建某种与 React 一起使用的依赖注入 (DI) 框架。不久前我创建了一个名为AntidoteJS 的库，它就是这样做的。您不需要使用它，但它会向您展示如何完成它。看看the source吧。

这里有一些又快又脏的东西。我没有测试过，但它显示了基本思想：

import { inject } from "antidotejs"

export class MyComponent extends React.Component {

  @inject("StateSerializer")
  serializer

  constuctor(props, children) {
    super(props, children);
    this.serializer.load(props.id);
  }

  setState(newState) {
    super.setState(newState);
    this.serializer.save(newState);
  }

}