javascript - 在 Redux 中使用 Action 的正确方法

Question

我正在做一个颜色猜谜游戏。我有一个名为 generateColors() 的操作，它生成 9 种颜色，并且将从这 9 种颜色中随机选择一个答案。我的 App.js 呈现 Header.js 和 BoxGrid.js。

目前我在 BoxGrid.js 中调用 generateColors()。将答案传递给 Header.js 的正确方法是什么？我应该改为在 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);

提前致谢。

Answer 1

我不确定应用程序的外观，所以我可能是错的。

因为你使用的是 Redux，只需将答案保存到你的 Redux 商店，并将 Header 连接到商店(或者只需连接 App 并将 Prop 传递给Header，两者都可以)

在这种情况下，我个人更愿意将该操作放在 App.js 中，因此 BoxGrid 不需要关心任何应用程序逻辑，只需呈现 UI。但我认为这只是个人喜好，没有正确答案。

你可以在这里查看 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