谁能提供-mapDispatchToProps
和this.props.dispatch()
我下面的代码使用 this.props.dispatch
/*Action-Navigation*/
/*Navigation Action*/
const init = () => {
return (dispatch) => {
dispatch ({
type : 'NAV_LINKS',
data : ['Home', 'Summary']
})
}
}
/*Component-Navigation*/
class Navigation extends React.Component {
constructor(props){
super(props);
this.state = {
};
}
componentWillMount() {
this.props.dispatch(init());
}
componentWillReceiveProps(props){
console.log(props);
}
render() {
return (
<div className="navigation-wrap">
<div className="navigation-header">
Navigation
</div>
{this.props.navigationReducer.navigationLinks.map((links, index) => <div key={index}>{links}</div>)}
</div>
)
}
}
const mapStateToProps = (state={}) => {
return {
navigationReducer : state.navigationReducer,
navigationLinks : state.navigationReducer.navigationLinks
}
}
let NavigationContainer = ReactRedux.connect(mapStateToProps)(Navigation);
/*Reducer-Navigation*/
/*Navigation Reducer*/
let initialState = {};
const navigationReducer = (state=initialState, action) => {
switch(action.type){
case 'NAV_LINKS':
return Object.assign(state, {
navigationLinks : action.data
})
default:
return state
}
}
/*Reducer-Index*/
/*combine all reducers*/
const reducers = Redux.combineReducers({
navigationReducer
});
/*App*/
/*Create a store*/
const store = Redux.createStore(
reducers,
Redux.applyMiddleware(ReduxThunk.default)
);
/*Render component to DOM*/
const render = () => {
ReactDOM.render(
<ReactRedux.Provider store={store}>
<NavigationContainer />
</ReactRedux.Provider>,
document.getElementById('rootApp')
);
}
render();
使用redux connect时,mapDispatchToProps
使dispatch
方法可用于您的道具。这就是为什么您有权this.props.dispatch()
在组件中执行操作。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句