創建陣營那*可以*在Redux的應用中使用的組件

Question

假設你有創建作爲組件庫的一部分的相對簡單的組件（簡化爲簡潔起見）：

class ExampleComponent extends React.Component { 
    componentDidMount() { 
     getAsyncData().then((response) => { 
      const {a} = response.data; 
      this.setState({a}); 
      this.props.notify({a}); 
     });  
    } 

    render() { 
     return (
      <h1>{this.state.a}</h1> 
     ); 
    } 
} 

該組件是必需的到允許將其放入應用程序（認爲谷歌地圖採用相對類似的方法），並使其正常工作。但是，它可以通過某種回調（參見上面的this.props.notify）與其他應用程序共享，它可以通過其props接收。 這是一個實際需求，而不是建築選擇。

因爲這是一個圖書館的一部分 - 你不知道它是會得到在在任何時候都使用什麼樣的應用，但你知道，在很多許多情況下它要在Redux應用程序中使用。

對於終極版應用上述自包含的方法是不一定是最好的 - 作爲檢索data在response更好地在終極版商店，其中它可以通過應用程序的其他部分被消耗保持在應用狀態。

更應如此 - 的本身就是最好是「被動的」，並沒有state可言，而使用mapStateToProps有Redux的基礎設施通過props注入狀態更新進去。

的想法是，當是在終極版應用程序 - 它setState呼叫，並參考this.state在其render方法都弄好了抽象，並通過終極版「重新路由」到props？

一種方法是使使用dispatch，默認情況下調用setState，並且可以通過覆蓋注射終極版dispatch - 基本上藉此終極版：

class ExampleComponent extends React.Component { 
    constructor() { 
     super(); 
     this.dispatch = this.props.dispatch || this.dispatch; 
    } 

    componentDidMount() { 
     getAsyncData().then((response) => { 
      this.dispatch({type: 'SOME_ACTION', data: response.data}); 
     });  
    } 

    dispatch(action) { 
     swtich (action.type) { 
     case 'SOME_ACTION': 
      const {a} = action.data; 
      this.setState({a}); 
     case 'ANOTHER_ACTION': ...     
     } 
    } 

    render() { 
     return (
      <h1>{this.state.a}</h1> 
     ); 
    } 
} 

在上面的例子中工作得非常好，儲存於：

1. this.state.a和它的親屬被撒在代碼周圍，而在Redux 應該this.props.state

2. 不必做this.dispatch = this.props.dispatch || this.dispatch;中的每個組件

我想，以避免明顯的BaseComponent解決辦法，抽象setState變成某種混合的......因爲這隨着時間的推移，代碼將遠離「規範」的React。

您是否看到一種優雅的方式，可以將兩種方法結合起來，Redux取代了固有的方法？

Answer 1

如果您認爲使用Redux的React組件與不使用Redux的React組件不同，您就犯了一個根本性錯誤。

事實上，React組件只是一個React組件。

這是所有的組件需要的樣子：

function ExampleComponent({ a }) { 
    return (
    <h1>{a}</h1> 
); 
} 

簡單，乾淨，可讀，可測試。

您的異步數據提取應該隱藏在組件的componentDidMount()方法中沒有明顯的原因。它可以在應用程序的其他地方觸發。它應該是。