Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How use react-redux connect with mapStateToProps,MapDispatchToProps and redux-router

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
like image 879
Max P Avatar asked Dec 24 '15 09:12

Max P


People also ask

What is mapStateToProps and mapDispatchToProps in React-Redux?

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.

How do I connect Redux With React?

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.

Can I pass multiple components within connect Redux?

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.

What is mapStateToProps in React-Redux?

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.

What is mapstatetoprops in React Redux?

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.

What is the use of React Redux Connect() API?

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().

How do I dispatch an action in React Redux?

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:

How to get the latest state from Redux store to react?

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.


2 Answers

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);
like image 78
Max P Avatar answered Oct 18 '22 20:10

Max P


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'));
like image 1
zloctb Avatar answered Oct 18 '22 19:10

zloctb