javascript - 在 React 中保存本地状态

Question

在我的应用程序中，我使用了多个 Container成分。在每个Container , 有 Buttons .

取决于state应用程序的 Buttons可点击(或不可点击)。是否Button是否禁用，在本地管理 state 每个 Container .App的结果和状态可以保存和加载。

问题来了:当我保存(或加载)应用程序时，很难“提取” state的 Buttons来自每个 Container .全局节能state (Redux)相当容易。

但是如何保存本地state来自每个 Container 和我如何将它反馈给每个Container ？

读取本地state通过 parent 管理Component从 child 调用方法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 来获得单点真实性是一个很棒的想法。要将状态“反馈”回容器，您必须将状态和 Prop 映射到您的组件。

这是从官方文档中拿来的容器示例:

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

connect 发挥了所有的作用。