- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
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/
C++ 核心指南(C++ Core Guidelines)是由 Bjarne Stroustrup、Herb Sutter 等顶尖 C+ 专家创建的一份 C++ 指南、规则及最佳实践。旨在帮助
关闭。这个问题需要更多focused .它目前不接受答案。 想改进这个问题吗? 更新问题,使其只关注一个问题 editing this post . 关闭 4 年前。 Improve this qu
C++ 核心指南(C++ Core Guidelines)是由 Bjarne Stroustrup、Herb Sutter 等顶尖 C+ 专家创建的一份 C++ 指南、规则及最佳实践。旨在帮助
import React, { Component } from 'react' import _ from 'lodash' import { PageHeader, Row, Col, FormG
在《Scala 编程》第 239 页中,第一段说: Composition and inheritance are two ways to define a new class in terms of
我对 Node.js 比较陌生,我试图通过编写一个简单的模块来更熟悉它。该模块的目的是获取 ID、抓取网站并返回包含数据的字典数组。 网站上的数据分散在各个页面上,而每个页面都通过 URI 中的不同索
很确定我误解了 git。 我的目标 我在 github 上有一个带有“master”分支的私有(private)存储库。 我还想有一个生产分支,我会将所有更改从 master 推送到该分支。 然后我想
抱歉标题模糊; 我一直在重构我的一些 AngularJS 代码,试图让它更“有 Angular ”,我注意到这种模式经常出现: app.service("someService", function(
模拟 ScheduledExecutorService确实会让我的类(class)测试更容易,但根据 mockito recommendations这似乎是个坏主意,因为模拟类的逻辑可能会以不正确的方
我正在使用 LINQ to XML 生成 XML 文档文档。我希望 XML 文档最小化,即应该省略很少使用的属性。目前,我是这样做的: XElement element = new XElement(
这里是一个使用响应式(Reactive)编程的案例(例如使用 RxJava) 有一个具有一些属性(姓名、姓氏)的 User 对象 - 可观察 一个 Activity 包含 2 个 fragment ,
这不是一个非常精确的问题。我想我理解“ react 提升状态”范式。据我所知,这是两个同级组件访问各自属性的唯一干净方式。 但这样做,我最终得到了一个包含所有内容的巨大类:所有子组件属性的数据信息,以
我是一名优秀的程序员,十分优秀!