在 React 功能組件中使用 bindActionCreators 和 mapDispatchToProps 給我 undefined

Question

在功能組件中，我將bindActionCreators與mapDispatchToProps一起使用。 當我嘗試通過props訪問它時，我什么也沒看到。 下面是我如何使用它們。

function mapDispatchToProps(dispatch) {
    const actions = Object.assign({}, saveActions);
    return { actions: bindActionCreators(actions, dispatch) }
}

export default connect(null, mapDispatchToProps)(App);

在我的return中，

我有

return (
   ...
   <SaveModal actions={props.actions} />
   ...
)

當我在SaveModal中檢查this.props.actions時，它是一個 Class 組件，它沒有定義。 當我在App中檢查props.actions時，它也是未定義的。 我錯過了什么嗎？

Answer 1

取決於safeActions的形狀。

你這樣做的方式，每個safeActions.x都變成了prop.x 。

另外，請注意，您可以這樣做

export default connect(null, safeActions)(App);

以達到完全相同的結果。

然后請注意，對於 function 組件，我們建議使用useDispatch和useSelector掛鈎而不是使用connect ，因為它更容易處理。

https://redux.js.org/style-guide/style-guide/#use-the-react-redux-hooks-api