單個組件中的多個actionCreators

我想讓多個actionCreators分派到一個組件中。我知道你可以用狀態單個組件中的多個actionCreators

export default connect(
    (state: ApplicationState) => Object.assign({}, state.search, state.resources), 
    ResourcesState.actionCreators// i have another actionCreator I want to add 
)(Home) as typeof Home;

，但不能確定的語法與actionCreators做到這一點做到這一點。我已經讀入

mapDispatchToProps

，但不知道如何實現。

來源

2017-09-15 Isaac Levin

mapDispatchToProps是connect中的第二個參數。因此，例如：

import customAction from 'actions-directory-in-your-app' 

const mapStateToProps =() => {} // no implementing anything for example purposes 
const mapDispatchToProps =() => ({ customAction }) 

const ConnectedContainer = connect(
    mapStateToProps, 
    mapDispatchToProps 
)(YourContainer)

customAction目前已成爲YourContainer道具讓您可以在組件中使用同樣的方式等道具。

來源

2017-09-15 18:05:47 mersocarlin

的第二個參數來連接需要一個object或functioñ所以你可以瞭解更多關於如何用行動創造者添加

export default connect(
    (state: ApplicationState) => Object.assign({}, state.search, state.resources), 

    { 
     ResourcesState.actionCreators, 
     some_other_action_creators, 
     some_more 
    } 
)(Home) as typeof Home;

而且通讀這個答案＃2

Why is there no need for a mapDispatchToProps function here?

來源

2017-09-15 18:07:42

有幾種方法可以設置在React組件中分配Redux動作：

使用connect(mapState)(MyComponent)。默認情況下，您的組件將被給予props.dispatch，您可以撥打props.dispatch({type : "SOME_ACTION"})。

傳遞mapDispatchToProps函數作爲連接的第二個參數。在裏面，你可以創建新的函數引用調用dispatch：

function mapDispatchToProps(dispatch) { 
    return { 
     addTodo : (text) => dispatch({type : "ADD_TODO", text}) 
    } 
}

您還可以使用終極版bindActionCreators工具來代替：

function mapDispatchToProps(dispatch) { 
    return bindActionCreators({addTodo, toggleTodo}, dispatch); 
}

最後，你可以傳遞一個對象全面的行動創造者直接的到connect：

const actions = {addTodo, toggleTodo}; 
export default connect(mapState, actions)(MyComponent);

我強烈推薦第四種方法，我在我的博客文章Idiomatic Redux: Why Use Action Creators?中也會談到。

來源

2017-09-15 18:10:16 markerikson

連接的第二個參數需要一個對象，因此您可以使用ES6語法並避免使用mapDispatchToProps。

import { yourAction } from './your_actions_folder' 
class Home extends Component{ 
.... 
//For dispatch a action you only call the action Creator 
this.props.yourAction() 
} 
export default connect(mapStateToProps,{yourAction})(Home)

來源

2017-09-15 18:31:27

單個組件中的多個actionCreators

回答

相關問題