在Redux中使用Action的正確方法

我正在進行顏色猜測遊戲。我有一個名爲generateColors()的動作，可以生成9種顏色，從這9種顏色中隨機選擇一個答案。我的App.js呈現Header.js和BoxGrid.js。在Redux中使用Action的正確方法

目前我在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);

在此先感謝。

來源

2017-02-09 Leeyt

我不確定應用程序的外觀如何，所以我可能是錯的。

因爲你使用的終極版，只需保存回答了你的終極版存儲和連接Header商店（或只需連接App並通過道具到Header，無論是罰款）

我個人」在這種情況下，d更願意將該操作放在App.js中，因此BoxGrid不需要關心任何應用程序邏輯，只是呈現UI。但我認爲這只是個人的口味，沒有正確的答案。

你可以看到終極版文檔這裏的常見問題解答：

我應該只連接我頂組件，或者我可以在我的樹多個組件連接？

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

來源

2017-02-09 03:47:09 CodinCat

我通過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組件

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

然後：與其在App組件設置本地狀態，你將有answer減速，這將是這樣的：

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

而一個saveAnswer行動的創建者像與mapStateToProps，功能，你只需將答案從商店中取出並作爲道具返回，可以傳遞給任何子組件。隨着您的層次結構變得越來越複雜，您可以選擇連接任何子組件，但是如果您只有3個組件，則連接App並將商店數據作爲道具傳遞可能更有意義。

來源

2017-02-09 05:09:21 bjudson

在Redux中使用Action的正確方法

回答

相關問題