在從mapDispatchToProps傳遞函數的容器組分反應/終極版應用

我渲染RootComponent：在從mapDispatchToProps傳遞函數的容器組分反應/終極版應用

//RENDERING ROOT COMPONENT------------------------------------------------------------------------------- 
ReactDOM.render(

    <Provider store={store}> 
     <RootComponent /> 
    </Provider>, 

    document.getElementById('app')); 
//RENDERING ROOT COMPONENT-------------------------------------------------------------------------------

RootComponent僅具有一個容器，包括：

//ROOT COMPONENT---------------------------------------------------------------------------------------------------- 
const RootComponent =() => (

    <div> 
     <BookListContainer />   
    </div> 

); 
//ROOT COMPONENT----------------------------------------------------------------------------------------------------

BooklistContainer：

//BOOKLIST CONTAINER------------------------------------------------------------------------------------------------------- 
class BookListContainer extends Component{ 

    componentWillMount(){ 
     console.log('componentWillMount executing...'); 
     () => this.props.ajaxRequestTriggeredMethod(); 
    } 

    render() { 
     return (
      <div> 
       <BooksList DataInputParam={this.props.books} BtnClickHandler={this.props.buttonClickedMethod} />    
      </div> 
     ); 
    } 
} 


const mapStateToProps = (state) => { 
    return{ 
     books: state.BooksReducer 
    }; 
}; 

const mapDispatchToProps = (dispatch) => { 
    return { 
     buttonClickedMethod:() => dispatch({type: 'BUTTON_CLICKED'}), 
     ajaxRequestTriggeredMethod:() => console.log('ajaxRequestTriggeredMethod is consoled...') 
    }; 
}; 

connect(mapStateToProps, mapDispatchToProps)(BookListContainer); 
//BOOKLIST CONTAINER-------------------------------------------------------------------------------------------------------

所有成分都在此刻一個js文件，所以我不會導出/導入除了標準庫什麼...

結果：我得到「componentWillMount執行......」在控制檯消息，但不得到'ajaxRequestTriggeredMethod的安慰......' MESSA GE。另外，控制檯中不顯示任何錯誤。

來源

2017-08-17 vshnukrshna

不是專家，但connect()函數返回

A higher-order React component class that passes state and action creators into your component derived from the supplied arguments

所以我的猜測是做這樣的事情：

const randomNameForComponent = connect(mapStatetoProps, mapDispatchToProps)(BookListContainer); 
export default randomNameForComponent;

，並在您RootComponent，渲染randomNameForComponent代替BookListComponent 。

它應該做的伎倆。

來源

2017-08-17 11:31:32

謝謝，@GaetanBoyals，它的工作原理！但現在我只是想說明一個方面：據我瞭解每個_container component_ a.k.a _smart component_「連接」其子組件商店。現在，在這種特殊情況下，什麼應該被看作是一個容器組件：** ** BookListContainer **或** randomNameForComponent或兩者？ – vshnukrshna

沒有問題，我也掙扎與連接時間長;）至於你的問題，這將是** ** randomNameForComponent，因爲[此鏈接（https用作聲明：//計算器。com/questions/43414254/component-and-container-in-react-redux）作爲接受的答案，「容器組件是一個反應組件，與Redux管理的狀態直接相關，也稱爲」智能組件'「。另外，如果我的答案解決了問題，請您將其標記爲正確的？謝謝:) –

好的，謝謝你的幫助！ – vshnukrshna

它，因爲你沒有執行箭頭的功能。您可以直接調用此方法。

componentWillMount(){ 
    console.log('componentWillMount executing...'); 
    this.props.ajaxRequestTriggeredMethod(); //Invoke directly 
}

來源

2017-08-17 11:14:37 Dev

感謝您的回答，但似乎我在這裏丟失了重要的東西：如果我這樣做** this.props.ajaxRequestTriggeredMethod（）; **我得到一個錯誤：** Uncaught TypeError：this.props.ajaxRequestTriggeredMethod是不是一個功能** – vshnukrshna

@vshnukrshna對不起，我離開了一段時間。但正如Gaetan所建議的那樣，你應該有容器組件，它可以處理連接和道具，並將道具傳遞給表示組件。在你的情況下，雖然，我認爲你應該導出所連接的組件，出口默認連接（mapStateToProps，mapDispatchToProps）（BookListContainer）; – Dev

感謝您的幫助，@Dev！ – vshnukrshna

在從mapDispatchToProps傳遞函數的容器組分反應/終極版應用

回答

相關問題