Question

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

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

问题出现了：当我保存（或加载）应用程序时，它非常难以提取提取＆＃34;来自每个 state的{{1}}的{{1}}。在全局Buttons中保存相当容易。

但是如何保存本地Container来自每个 state (Redux) 和如何将其反馈给每个state ？

通过调用来自子Container的方法的父Container来管理阅读本地state。我知道这是一个反模式，但它确实有效。

Component

有更好的建议吗？

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而且你错误地将其架构误解为仅仅是全局状态的同义词。 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);
  }

}

在React中保存当地州

2 个答案: