[英]Chain connect/mapStateToProps/mapDispatchToProps functions for code reuse in react-redux
[英]How use react-redux connect with mapStateToProps,MapDispatchToProps and redux-router
我想在登录后在我的容器“LoginPage”(智能组件)重定向中使用。 像这样的东西:
handleSubmit(username, pass, nextPath) {
function redirect() {
this.props.pushState(null, nextPath);
}
this.props.login(username, pass, redirect); //action from LoginAcitons
}
用户名和密码从dumb-component到达。
智能组件连接
function mapStateToProps(state) {
return {
user: state.app.user
};
}
function mapDispatchToProps(dispatch) {
return bindActionCreators(LoginActions, dispatch)
}
如何从redux-router添加pushState? 或者我错了路?
export default connect(mapStateToProps, {pushState})(LoginPage); //works, but haven't actions
export default connect(mapStateToProps, mapDispatchToProps)(LoginPage); //works, but haven't pushState
export default connect(mapStateToProps, mapDispatchToProps, {pushState})(LoginPage); //Uncaught TypeError: finalMergeProps is not a function
function mapStateToProps(state) {
return {
user: state.app.user
};
}
function mapDispatchToProps(dispatch) {
return {
actions: bindActionCreators(LoginActions, dispatch),
routerActions: bindActionCreators({pushState}, dispatch)
}
}
export default connect(mapStateToProps, mapDispatchToProps)(LoginPage);
简单的骨架:
import React from 'react';
import ReactDOM from 'react-dom'
import { createStore,applyMiddleware, combineReducers } from 'redux'
import { connect, Provider } from 'react-redux'
import thunk from 'redux-thunk'
import logger from 'redux-logger'
import View from './view';
import {playListReducer, artistReducers} from './reducers'
/*create rootReducer*/
const rootReducer = combineReducers({
playlist: playListReducer,
artist: artistReducers
})
/* create store */
let store = createStore(rootReducer,applyMiddleware(logger ,thunk));
/* connect view and store */
const App = connect(
state => ({
//same key as combineReducers
playlist:state.playlist,
artist:state.artist
}),
dispatch => ({
})
)(View);
ReactDOM.render(
<Provider store={store}>
<App />
</Provider> ,
document.getElementById('wrapper'));
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.