Redux：在哪裏放置「啞」處理程序？

比方說，我有一個組件的點擊處理程序不需要修改Redux存儲。即它可能根據組件的道具啓動文件的下載。Redux：在哪裏放置「啞」處理程序？

即，您有一個Web界面，用於在服務器上處理的視頻列表。點擊視頻項目檢查道具以查看視頻是否已完成處理。如果有，它會開始下載視頻，另外它會彈出一個警告，說明視頻仍在處理中。

通常，處理程序傾向於在mapDispatchToProps中定義。但是，在這種情況下，我實際上並不需要觸摸狀態，因此在其中定義處理程序感覺不正確。

這樣的處理程序的正確位置是在'啞'組件而不是'智能'容器？

2016-11-14 NRaf

我仍然會在容器中將此功能作爲道具傳遞下去 - 而不是在mapDispatchToProps中。

如：

// SmartComponent.js 
import React, { Component } from 'react' 
import DumbComponent from '/path/to/DumbComponent' 

export class SmartComponent extends React.Component { 
    constructor(props) { 
    super(props); 
    this.handleOnClick = this.handleOnClick.bind(this); 
    } 

    handleOnClick(params) { 
    // do whatever you need to do here 
    } 

    render() { 
    return (
     <DumbComponent handleOnClick={this.handleOnClick} /> 
    ); 
    } 
}; 

export default SmartComponent;

// DumbComponent.js 

import React from 'react' 
import Button from '/path/to/button' 

export const DumbComponent = (props) = { 
    const { handleOnClick } = props; 
    return (
    <Button onClick={handleOnClick} /> 
); 
} 

export default DumbComponent;

我也許應該補充一點，我通常會構建它讓我有高於此另一個層面連接到商店 - 像ContainerComponent例如 - 這通常是路線的視圖。這就是爲什麼我沒有把這個SmartComponent連接到商店。你可以做到這一點，但。

來源

2016-11-14 04:21:16 patrick

Redux：在哪裏放置「啞」處理程序？

回答

相關問題