简体   繁体   English

如何使用react-redux连接mapStateToProps,MapDispatchToProps和redux-router

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

I want to use in my container "LoginPage" (smart-component) redirect after login. 我想在登录后在我的容器“LoginPage”(智能组件)重定向中使用。 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. 用户名和密码从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 ? 如何从redux-router添加pushState? 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
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'));

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 链接connect / mapStateToProps / mapDispatchToProps函数以在react-redux中重用代码 - Chain connect/mapStateToProps/mapDispatchToProps functions for code reuse in react-redux 了解 React-Redux 中的 mapStateToProps 和 mapDispatchToProps - Understanding mapStateToProps & mapDispatchToProps in React-Redux React-redux connect()的mapStateToProps在react-router导航上被多次调用 - React-redux connect()'s mapStateToProps being called multiple times on react-router navigation 理解 React-Redux 和 mapStateToProps() - Understanding React-Redux and mapStateToProps() Redux连接在初始加载时未调用mapStateToProps或mapDispatchToProps - Redux connect not calling mapStateToProps or mapDispatchToProps on initial load React + Redux connect(mapStateToProps) - React + Redux connect (mapStateToProps) 将Redux-router与Polymer 3应用程序一起使用 - Use Redux-router with polymer 3 app 我可以使用&#39;react-redux&#39;&#39;connect&#39;HOC通过mapStateToProps为&#39;通用&#39;React组件提供自定义选择器吗? - Can I use the 'react-redux' 'connect' HOC to provide custom selectors to 'generic' React components through mapStateToProps? React-redux:mapDispatchToProps 不调度动作 - React-redux: mapDispatchToProps does not dispatch action mapStateToProps如何在react-redux实现中接收更新的状态 - How can mapStateToProps receive the updated state in react-redux implementation
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM