Question

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

目前我在generateColors()中致电BoxGrid.js。将答案传递给Header.js的正确方法是什么？我应该拨打generateColors()中的App.js吗？

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并将道具传递给Header，两者都很好）

我个人更喜欢在这种情况下将该动作放在App.js中，因此BoxGrid不需要关心任何应用程序逻辑，只需渲染UI。但我认为这只是个人品味而且没有正确答案。

您可以在此处查看Redux doc的faq：

我应该只连接我的顶级组件，还是可以连接树中的多个组件？

http://redux.js.org/docs/faq/ReactRedux.html#should-i-only-connect-my-top-component-or-can-i-connect-multiple-components-in-my-tree

Answer 2

我假设answer表示用户正在挑选颜色，并且您希望将该用户输入从一个组件传递到另一个组件。有几种方法可以做到这一点。您可以将函数从App传递给下面的组件，当调用该函数时，它会在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>
  }
}

然后，当BoxGrid调用this.props.updateAnswer(answer)时，它将传递给标头。这不使用Redux商店。

另一种方法是使用Redux存储，并调用一个动作。如果您在多个组件之间共享数据，这可能比使用上述本地状态更有意义。与您已经发布的内容非常相似，您可以只连接任何组件并获取全局状态。您可以使用App减速器，而不是在answer组件中设置本地状态，如下所示：

function answer (state = { answer: null }, action) {
  if (action.type === 'saveAnswer') {
    return { answer: action.answer }
  }
}

还有一个saveAnswer动作创建者：

function saveAnswer (answer) {
  return {
     type: 'saveAnswer',
     answer: answer
  }
}

然后，如果您将App组件与mapStateToProps连接起来，则只需从商店中获取答案并将其作为道具返回，然后将其传递给任何子组件。随着层次结构变得越来越复杂，您可以选择连接任何子组件，但如果您只有3个组件，那么连接App并将商店中的数据作为道具传递下来可能更有意义。

在Redux中使用Action的正确方法

2 个答案: