React Native：在組件內部調用Redux getState（）

我想實現的是這樣的：我想檢查NavigationDrawer是否打開，如果是，那麼當用戶單擊後退（在Android上）時，我想關閉抽屜而不是退出應用程序。我有一個布爾（isDrawerOpen）存儲在Redux中，並正確更新。React Native：在組件內部調用Redux getState（）

我的問題是，我不知道如何在我的組件內部調用getState()。該組件看起來是這樣的：

class MainScreen extends Component { 
    constructor(props) { 
    super(props) 

    BackAndroid.addEventListener('hardwareBackPress', function() { 
     if (somehow.getState().isDrawerOpen) { 
     // Close drawer. 
     return true; 
     } 

     return false; 
    }); 
    } 

    render() { 
     return ... 
    } 
} 

const mapStateToProps = (state) => { 
    return { 
    ... 
    } 
} 

export default connect(mapStateToProps)(MainScreen)

而在另一個容器組件創建存儲，就像這樣：

export default class App extends Component { 
    render() { 
     return (
      <Provider store={store}> 
       <MainScreen /> 
      </Provider> 
     ); 
    } 
}

在我MainScreen組件每當我需要派遣一個動作，我通過做呼叫this.props.dispatch(someAction())。但是，this.props.getState()似乎並不存在。

當然，當觸發mapStateToProps（）時更新MainScreen的狀態，然後檢查Redux的狀態而不是檢查組件的狀態。但是，更新組件的狀態會導致render（）被觸發，這不是我想要的。此外，我想知道如何從組件內部訪問Redux的狀態。

在此先感謝！

來源

2016-09-23 George

通過使用mapStateToProps並使用組件內的道具來獲取redux的「狀態」。在大多數情況下，使用redux時，您不會在組件內部使用this.state，而是使用最初來自mapStateToProps的this.props。在你的情況下，我會將抽屜打開/關閉狀態存儲在redux狀態本身，然後有一個redux動作來打開/關閉它（更改bool或其他）。然後你將它映射到你的組件，就像'this.props。 isDrawerOpen'。 – ajmajmajma

感謝您的回覆。是的，我確實在Redux中存儲了抽屜的狀態，而且我確實有針對此的具體操作。此外，無論何時抽屜的狀態改變，mapStateToProps都會以正確的信息觸發。到現在爲止還挺好。問題在於，MainScreen無法更新自己的道具，因此我必須通過調用setState將我從Redux收到的狀態映射到MainScreen的狀態。但是，這會再次觸發MainScreen的'render（）'，這不是我想要的。 – George

如果可以的話，你應該避免使用setState，我只需要使用redux動作或某種初始狀態？有一些技巧通過檢查'shouldComponentUpdate'的道具來避免渲染。例如，反應mixin PureRenderMixin只是這樣做，如果道具沒有改變，嘗試避免渲染。 – ajmajmajma

您不應該將BackAndroid.addEventListener放在構造函數中，因爲其中的道具不會更改。您需要將聽衆放在componentDidMount或componentWillMount以便能夠檢查您的props的最新狀態。然後在你的聽衆裏面，檢查this.props.isDrawerOpen，應該從connect的mapStateToProps的頂部自動傳遞和更新。您不應該在connect ed組件內部呼叫getState。

來源

2016-09-23 16:07:13 rclai

嗨，謝謝你的回覆。你能幫我理解一下你的意思嗎？我看不出'MainScreen'如何更新自己的道具。首先，將調用mapStateToProps並在那裏將Redux的狀態映射到一些新的道具。然後，使用這些新道具觸發MainScreen內的'componentWillReceiveProps（nextProps）'。最後，由於MainScreen無法更新自己的道具，我只能通過調用'setState'將這些道具映射到MainScreen的狀態。但是這會再次觸發render（），我不希望發生這種情況。或者我錯過了什麼？ – George

你能告訴我你是如何將抽屜連接到redux的？ – rclai

我使用react-native-drawer，並將它放在與MainScreen不同的組件中。 MainScreen實際上是抽屜的孩子。在抽屜的onOpen/onClose中，我分別調用'this.props.dispatch（updateDrawerState（true））'傳遞true/false。連接到MainScreen的'mapStateToProps'始終具有正確的Redux狀態。因此，按預期工作。 – George

React Native：在組件內部調用Redux getState（）

回答

相關問題