I want to use in my container "LoginPage" (smart-component) redirect after login. Something like this:
handleSubmit(username, pass, nextPath) {
function redirect() {
this.props.pushState(null, nextPath);
}
this.props.login(username, pass, redirect); //action from LoginAcitons
}
username and pass arrived from dumb-component.
Smart component connect
function mapStateToProps(state) {
return {
user: state.app.user
};
}
function mapDispatchToProps(dispatch) {
return bindActionCreators(LoginActions, dispatch)
}
How I can add pushState from redux-router ? Or I'm on wrong way?
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
The mapStateToProps and mapDispatchToProps deals with your Redux store's state and dispatch , respectively. state and dispatch will be supplied to your mapStateToProps or mapDispatchToProps functions as the first argument.
Before converting a regular React component to a container component using connect() , you have to specify the Redux store to which the component will be connected. Assume that you have a container component named NewComment for adding a new comment to a post and also showing a button to submit the comment.
Since you can have only one default export, you'd have to use named export in this case or split up those two components in two files.
As the first argument passed in to connect , mapStateToProps is used for selecting the part of the data from the store that the connected component needs. It's frequently referred to as just mapState for short. It is called every time the store state changes.
mapStateToProps Definition The React Redux’s mapStateToProps has 2 parameters. The first is the state and the second is an optional ownProps parameter. It returns a plain object containing the data that the connected component needs.
The React Redux connect() API is used for creating container elements that are connected to the Redux store. The Redux store is derived from the topmost ancestor of the component using React Context. If you are only creating a presentational component, you have no need for connect().
dispatch is a function of the Redux store. You call store.dispatch to dispatch an action. This is the only way to trigger a state change. With React Redux, your components never access the store directly - connect does it for you. React Redux gives you two ways to let components dispatch actions:
The arguments [1] is undefined since we didn’t include the ownProps parameter. We can define mapStateToProps and use it to get the latest state from our Redux Store to our React app via the connect function. It has 2 parameters, which are state for the store’s state and ownProps for the props that we pass into the component ourselves.
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);
Simple skeleton :
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'));
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With