gpt4 book ai didi

reactjs - 将 redux 状态复制到本地状态是否违反 redux 哲学?

转载 作者:行者123 更新时间:2023-12-03 13:29:33 27 4
gpt4 key购买 nike

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-redux-state :

Using local component state is fine. As a developer, it is your job to determine what kinds of state make up your application, and where each piece of state should live. Find a balance that works for you, and go with it.

Some common rules of thumb for determing what kind of data should be put into Redux:

  • Do other parts of the application care about this data?
  • Do you need to be able to create further derived data based on this original data?
  • Is the same data being used to drive multiple components?
  • Is there value to you in being able to restore this state to a given point in time (ie, time travel debugging)?
  • Do you want to cache the data (ie, use what's in state if it's already there instead of re-requesting it)?

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

关于reactjs - 将 redux 状态复制到本地状态是否违反 redux 哲学?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42498430/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com