Je souhaite utiliser dans mon conteneur "LoginPage" (composant intelligent), une redirection après la connexion. Quelque chose comme ça:
handleSubmit(username, pass, nextPath) {
function redirect() {
this.props.pushState(null, nextPath);
}
this.props.login(username, pass, redirect); //action from LoginAcitons
}
nom d'utilisateur et passe sont arrivés de dumb-composant.
Smart Component Connect
function mapStateToProps(state) {
return {
user: state.app.user
};
}
function mapDispatchToProps(dispatch) {
return bindActionCreators(LoginActions, dispatch)
}
Comment puis-je ajouter pushState à partir de redux-router? Ou je suis sur le mauvais chemin?
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);
Squelette simple:
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'));