[英]Proper way to use Action in Redux
I am working a color guessing game. 我正在研究一款色彩猜谜游戏。 I have an action called
generateColors()
that generate 9 colors and an answer will be randomly chosen from those 9 colors. 我有一个称为
generateColors()
,该操作生成9种颜色,并且将从这9种颜色中随机选择一个答案。 My App.js
renders Header.js
and BoxGrid.js
. 我的
App.js
呈现Header.js
和BoxGrid.js
。
Currently I call generateColors()
in BoxGrid.js
. 目前,我在
BoxGrid.js
调用generateColors()
。 What is the right way to pass answer to Header.js
? 将答案传递给
Header.js
的正确方法是什么? Should I call generateColors()
in App.js
instead? 我应该改为在
App.js
调用generateColors()
吗?
BoxGrid.js
import React, {Component} from 'react';
import {connect} from 'react-redux';
import Box from '../components/box';
import { generateColors } from '../actions';
class BoxGrid extends Component{
componentDidMount(){
this.props.generateColors();
}
render(){
return(
<div>
<div className="grid">
{this.props.colors.map((color)=>{
return <Box key={color} color={color}/>
})}
</div>
</div>
)
}
}
function mapState({colors}){
return {colors};
}
export default connect(mapState,{generateColors})(BoxGrid);
Thanks in advance. 提前致谢。
I'm not sure how the application looks like so I may be wrong. 我不确定应用程序的外观,所以我可能是错的。
Because you're using Redux, just save the answer to your Redux store, and connect Header
to the store (or just connect App
and pass the props down to Header
, both are fine) 因为您使用的是Redux,所以只需将答案保存到Redux商店中,然后将
Header
到商店(或仅连接App
并将道具传递给Header
,都可以)
Personally I'd prefer to put that action in App.js in this case, so the BoxGrid
doesn't need do care about any application logic, just renders the UI. 就我个人而言,在这种情况下,我希望将该动作放入App.js中,因此
BoxGrid
不需要关心任何应用程序逻辑,只需呈现UI。 But I think this is just personal tastes and there is no correct answer. 但是我认为这只是个人喜好,没有正确的答案。
You can see the faq of Redux doc here: 您可以在此处查看Redux文档的常见问题解答:
Should I only connect my top component, or can I connect multiple components in my tree?
我应该只连接顶部组件,还是可以连接树中的多个组件?
http://redux.js.org/docs/faq/ReactRedux.html#should-i-only-connect-my-top-component-or-can-i-connect-multiple-components-in-my-tree http://redux.js.org/docs/faq/ReactRedux.html#should-i-only-connect-my-top-component-or-can-i-connect-multiple-components-in-my-tree
I assume by answer
you mean that the user is picking a color, and you want to pass that user input from one component to another. 我以
answer
假设您的意思是用户正在选择一种颜色,并且您希望将该用户输入从一个组件传递到另一组件。 There are a couple of ways to do this. 有两种方法可以做到这一点。 You could pass down a function from
App
as a prop to the component below, and when that function is called, it sets local state within App
, which is also passed down to child components: 您可以将
App
中的一个函数作为prop传递给下面的组件,并在调用该函数时在App
设置本地状态,该状态也传递给子组件:
class App extends Component {
constructor(props) {
super(props)
this.state = {
answer: null
}
}
updateAnswer(answer) {
this.setState({ answer: answer })
}
render () {
return <div>
<Header answer={this.state.answer} />
<BoxGrid answer={this.state.answer} updateAnswer={this.updateAnswer.bind(this)} />
</div>
}
}
Then, when BoxGrid
calls this.props.updateAnswer(answer)
it will get passed to header. 然后,当
BoxGrid
调用this.props.updateAnswer(answer)
,它将传递到标头。 This doesn't use the Redux store. 这不使用Redux存储。
The other way is to use the Redux store, and call an action. 另一种方法是使用Redux存储,并调用一个动作。 If you are sharing data between several components this probably makes more sense than using local state as above.
如果要在多个组件之间共享数据,则可能比使用上面的本地状态更有意义。 Very similar to what you have already posted, you can just connect any component and grab the global state.
与您已经发布的内容非常相似,您可以连接任何组件并获取全局状态。 Instead of setting local state in the
App
component, you would have an answer
reducer, which would look like: 除了在
App
组件中设置本地状态外,您还可以使用一个answer
减少器,它看起来像:
function answer (state = { answer: null }, action) {
if (action.type === 'saveAnswer') {
return { answer: action.answer }
}
}
And a saveAnswer action creator like: 还有一个saveAnswer动作创建者,例如:
function saveAnswer (answer) {
return {
type: 'saveAnswer',
answer: answer
}
}
Then if you connect you App
component with mapStateToProps
, function you just grab the answer out of the store and return it as props, which can be passed down to any child component. 然后,如果将
App
组件与mapStateToProps
函数连接mapStateToProps
,则只需从商店中获取答案并将其作为道具返回即可,它可以向下传递给任何子组件。 As your hierarchy gets more complex, you can choose to connect any child component, but if you just have 3 total components, it probably makes more sense to just connect App
and pass down data from the store as props. 随着层次结构变得越来越复杂,您可以选择连接任何子组件,但是如果您只有3个组件,那么仅连接
App
并从商店传递数据作为道具可能更有意义。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.