将Redux状态复制到地方国家是反对Redux哲学的

import React, { Component } from 'react'
import _ from 'lodash'
import { PageHeader, Row, Col, FormGroup, ControlLabel, Button, FormControl, Panel } from 'react-bootstrap'
import FieldGroup from '../fieldGroup/fieldGroup'
import PassagePreview from './preview'
class PassageDetail extends Component {
  constructor(props) {
    super(props)
    this.handleChange = this.handleChange.bind(this)
    this.state = {
      passageDetails: {}
    }
  }
  componentDidMount() {
    this.props.fetchPassage(this.props.params.passageId)
  }
  componentWillReceiveProps(nextProps) {
    if(nextProps.passageState.passageStatus === 'success') {
      this.setState({passageDetails: nextProps.passageState.passage})
    }
  }
  handleChange(e) {
    let passageDetails = this.state.passageDetails
    passageDetails[e.target.name] = e.target.value
    this.setState({passageDetails})
  }
  render() {
    if(this.props.passageState.passageStatus !== 'success') {
      return null
    }
    return (
      <div>
        <PageHeader>
          Create Passage
        </PageHeader>
        <Row>
          <Col md={6}>
            <FieldGroup
              type="text"
              label="Passage Title"
              name="title"
              onChange={this.handleChange}
              value={this.state.passageDetails.title}
            />
            <FieldGroup
              type="text"
              label="Passage Author"
            />
            <FormGroup>
              <ControlLabel>Passage Text</ControlLabel>
              <FormControl componentClass="textarea" placeholder="textarea" rows="20" />
            </FormGroup>
          </Col>
          <Col md={6}>
            <PassagePreview passageDetails={this.state.passageDetails} />
          </Col>
        </Row>
        <Row>
          <Col md={6} mdOffset={6}>
            <Button block bsStyle="primary">Create Passage</Button>
          </Col>
        </Row>
      </div>
    )
  }
}
export default PassageDetail

那是我的组成部分。容器是：

import { connect } from 'react-redux'
import * as PassagesActions from '../actions/passages'
import PassageMain from '../components/passage/main'
const mapStateToProps = (state) => {
  return {
    passageState: state.PassageReducer
  }
}
const mapDispatchToProps = (dispatch) => {
  return {
    fetchPassages: () => {
      const params = {
        url: `${process.env.REACT_APP_API_ENDPOINT}/passages`
      }
      dispatch(PassagesActions.fetchData(params, 'passages'))
    },
    fetchPassage: (passageId) => {
      const params = {
        url: `${process.env.REACT_APP_API_ENDPOINT}/passages/${passageId}`
      }
      dispatch(PassagesActions.fetchData(params, 'passage'))
    }
  }
}
export default connect(
  mapStateToProps, mapDispatchToProps
)(PassageMain)

因此，您可以看到在我的componentDidMount中，我正在执行API调用（通过REDUX），在componentWillReceiveProps中，我将其复制到本地状态。这个想法是，如果我更改我的passage，它是在组件级别完成的，那么我可以通过一些尚未创建的redux操作将该对象传递给该对象。

这在Redux哲学中可以接受吗？我仍将头缠绕在redux上，所以如果这个问题没有意义，我深表歉意。

其他评论提出了一些好处，但也夸大了情况。根据redux常见问题问题，请访问http://redux.js.org/docs/faq/organizingstate.html#organizing-state-only-only-redux-state：

使用本地组件状态是。作为开发人员，确定哪种状态构成您的申请以及每个州应该居住的地方是您的工作。找到适合您的余额，并与之相处。

确定应该将哪种数据放入REDUX中的一些常见的经验法则：

应用程序的其他部分是否关心此数据？

您是否需要能够基于此原始数据创建进一步的派生数据？

是否使用相同的数据来驱动多个组件？

能够将此状态恢复到给定的时间点（即时间旅行调试），对您是否有价值？

您是否要缓存数据（即，如果已经存在的情况而不是重新要求它，请使用状态中的内容）？

因此，如果要使用本地组件状态作为"临时数据"派遣结果之前的区域，没关系。

它违反了" redux哲学"，出于充分的理由，您有一个架构和一个用于存储和集中应用程序状态的框架，您应该使用它！如果您使用组件状态，则将分散到应用程序状态，迟早会发生灾难。坚持使用Redux架构，尽可能多地使用，仅将组件状态用于次要UI详细信息，甚至更好，完全不要使用它。

这可能有助于查看您的还原器，但是很明显，如果您已经在Redux商店中持有passages的集合，则不需要组件状态。

如果您已经拥有有关passage的基本信息，并且需要从服务器上为该组件加载更多信息，则所有段落都应具有标志，表示您是否已经有了该信息，因此当您的组件加载时，仅在需要时信息。

无需使用componentWillReceiveProps，只需触发操作，在操作完成时更新换档器中的商店，仅此而已。您的集合将具有段落，您需要将其传递给组件（不仅仅是ID）。

redux是一个非常低的框架，它为您提供了很多自由。如果您怀疑自己是否做出正确的决定，请始终牢记：

与应用程序相关的任何信息都进入Redux Store
任何以任何方式影响应用程序的事物都是动作
React组件显示信息和Fire Redux操作，并通过从用户收集的信息，没有其他信息

要注意的另一件事是，您的组件应仅收到所需的属性。您正在将整个还原器传递给它，这可能完全可以，但是如果您在还原器中有很多数据，那么在所有性能中都不会影响组件，因为您将强制强制反应以更新组件时无需这样做。

做到这一点的" redux"方法越多地是将操作派遣到商店更新状态，并让redux重新渲染您是组件。您在这里所拥有的不会被认为是好习惯。

您的问题是组件状态将与商店同步，因此，如果商店更新并触发了重新渲染，则该组件可能会接收新的道具（如果没有其他任何更新state.PassageReducer，则可能不会接收新的道具）并将覆盖当地状态。

查看有关单向数据流的Redux文档和添加新的todos的待办事项示例。

相关内容

最新更新

热门标签：