Reduxのアクションを使用する適切な方法

Question

私は色を推測するゲームを行っています。私は9色を生成するgenerateColors()と呼ばれるアクションを持っており、回答は無作為に9色から選択されます。私のApp.jsレンダリングHeader.jsとBoxGrid.js。

現在、私はgenerateColors()をBoxGrid.jsに呼び出しています。 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のを使用しているので、ちょうどあなたの再来店への回答を保存し、ストアにHeaderを接続する（あるいは単にAppを接続し、Headerまでの小道具を渡し、両者が細かいです）

個人的に私は」この場合、そのアクションをApp.jsに入れたいので、BoxGridはアプリケーションロジックを気にする必要はなく、UIをレンダリングするだけです。しかし、私はこれがちょうど個人的な味であり、正しい答えはないと思う。あなたがここにReduxのドキュメントの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> 
    } 
} 

そして、BoxGridthis.props.updateAnswer(answer)と呼ばれ、ヘッダに渡されます。これはReduxストアを使用しません。

もう1つの方法は、Reduxストアを使用してアクションを呼び出すことです。複数のコンポーネント間でデータを共有している場合、おそらく上記のようにローカル状態を使用するよりも理にかなっています。既に投稿した内容と非常によく似ていますが、コンポーネントを接続してグローバルな状態を把握することができます。あなたはあなたのAppコンポーネントを接続する場合は、

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

：

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

などsaveAnswerアクション作成者：代わりにAppコンポーネントでローカル状態を設定するには、次のようになりanswer減速を、持っていますmapStateToPropsを使用すると、店舗の回答を取得して小道具として返すだけで、子コンポーネントに引き渡すことができます。階層が複雑になると、子コンポーネントを接続することもできますが、合計コンポーネントが3つのみの場合は、Appを接続し、ストアのデータを小道具として渡す方が理にかなっています。