将 redux 状态复制到本地状态是否违反了 redux 哲学？

Question

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 感到困惑，所以如果这个问题没有意义，我深表歉意。

Answer 1

其他评论提出了一些好的观点，但也夸大了事实。根据http://redux.js.org/docs/faq/OrganizingState.html#organizing-state-only-redux-state上的 Redux 常见问题解答：

使用本地组件状态就可以了。作为开发人员，您的工作是确定应用程序由哪些类型的状态组成，以及每个状态应该位于何处。找到一个适合你的平衡点，然后顺其自然。

用于确定应将哪种数据放入 Redux 的一些常见经验规则：

• 应用程序的其他部分是否关心这些数据？
• 您是否需要能够基于此原始数据创建进一步的派生数据？
• 是否使用相同的数据来驱动多个组件？
• 能够将此状态恢复到给定时间点（即时间旅行调试）对您有价值吗？
• 您是否想要缓存数据（即，如果状态已经存在，则使用状态而不是重新请求它）？

因此，如果您想在使用结果分派操作之前使用本地组件状态作为“临时数据”区域，那是可以的。