如何使用react-redux connect獲取初始數據

Question

我在這里閱讀文檔https://github.com/reactjs/react-redux/blob/master/docs/api.md

我想盡可能多地使用無狀態組件，但我無法弄清楚我將如何處理初始數據有效負載。 使用Stateful React組件，My容器和組件將顯示：

// Container
const mapDispatchToProps = (dispatch) {
    return {
        fetchData: () => dispatch(fetchDataAction());
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(MyComponent);

// Component
class MyComponent extends React.Component {
    componentDidMount() {
        this.props.fetchData();
    }
}

如果我使組件無狀態， componentDidMount的邏輯會在哪里？

我已經看過一些示例，他們建議您使用有狀態的React在容器中擴展無狀態組件，並在那里添加該邏輯：

// Container
class MyComponentContainer extends MyComponent {
    componentDidMount() {
        this.props.fetchData();
    }
}


export default connect(mapStateToProps, mapDispatchToProps)(MyComponentContainer);

但這是最好的方法嗎？ 如果我很想創建一個有狀態反應，為什么不直接在MyComponent上做呢？

編輯只是為了清楚; 我問我是否可以基本上加載我的初始數據，而無需在任何地方創建React.Component 。

Answer 1

與您的主要問題相關：是的，您可以在創建store立即加載數據。 只需在代碼中的任何位置使用store.dispatch ，甚至在React.Components之外。

你可以在這里查看一個簡單的例子 。 如您所見，組件和數據加載過程在其中完全相互分離。

但這是最好的方法嗎？ 如果我很想創建一個有狀態反應，為什么不直接在MyComponent上做呢？

事實上，我沒有任何理由去做你在片段中提供的內容。 更重要的是，從React.Component繼承你的組件絕對是React世界的氣味。

Answer 2

你可以在mapDispatchToProps中調度一個動作，但它是一種骯臟的方式，根本不推薦。

const mapDispatchToProps = (dispatch) {
    dispatch(fetchDataAction());
    return {
    }
}

但是現在mapDispatchToProps不會是純粹的副作用。 正確的解決方案是擁有一個容器組件，它將是有狀態的React組件，並在Mount上調度該操作。

另一種解決方案是，如果您正在使用react-redux-router那么：

• 調度行動onEnter - https://github.com/reactjs/react-router-redux/issues/319
• 每次路線更改時發送動作 - https://github.com/reactjs/redux/issues/227

請參閱： mapDispatchToProps應該調度初始化操作嗎？

Eidt：類似的問題如何在加載路由時從無狀態組件調度Redux操作？