4
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で、私は（Reduxの経由）API呼び出しをやってるとcomponentWillReceivePropsに、私は私の地元の状態にそれをコピーしてることがわかります。私が自分のpassageに変更を加えると、それがコンポーネントレベルで完了し、まだ作成されていないオブジェクトreduxをそのオブジェクトに戻すことができるという考えがあります。
これは還元哲学の中で受け入れられますか？私はまだreduxの周りに私の頭をラッピングしているので、この質問が意味をなさない場合はお詫び申し上げます。