[英]Redux - Dispatching Action (onClick Event)
I am simply trying to connect()
my LoginPage (component)
to my Redux Store
and dispatch
in action via a onClick (event)
.我只是想将我的
LoginPage (component)
connect()
)到我的Redux Store
并通过onClick (event)
进行dispatch
。 When I console.log(this.props)
my dispatch handler login()
isn't in the component's props.当我使用
console.log(this.props)
时,我的调度处理程序login()
不在组件的 props 中。
GitHub Repo -- https://github.com/jdavis-software/demo.git GitHub 回购-- https://github.com/jdavis-software/demo.git
Question: Why isn't my Redux Store
either connection
or dispatching
the actions?问题:为什么我的
Redux Store
既没有connection
也没有dispatching
操作?
LoginPage:登录页面:
import React, { Component} from 'react';
import { connect } from 'react-redux';
export class LoginPage extends Component<any> {
render(){
console.log('props doesnt have contain - login(): ', this.props)
return (<button onClick={ () => '' }>Login</button>)
}
}
const mapProps = state => ({ user: state.user })
const dispatchProps = (dispatch) => {
return {
login: () => dispatch({ type: 'USER_LOGGED_IN', payload: true})
}
}
export default connect(mapProps,dispatchProps)(LoginPage)
Redux Configuration: Redux 配置:
import { IStore, IUser } from '@interfaces';
import { createStore, combineReducers } from 'redux';
import ReduxPromise from 'redux-promise';
// reducers
import userReducer from './user.reducer';
// define the intial global store state
const initialState:IStore = {
user: {
isAuthenticated: false
}
}
const appReducer = combineReducers({user: userReducer})
export default createStore(appReducer,initialState);
User Reducer:用户减速器:
// initial state
const initalState:IUser = {
isAuthenticated: false
}
// reducer
const userReducer = (state:IUser = initalState, { type, payload}: IPayload): IUser => {
console.log('user reducer start', state)
switch (type) {
case 'USER_LOGGED_IN':
state = { ...state, isAuthenticated: payload }
break;
default:
return state;
}
return state;
};
export default userReducer;
Root Page:根页面:
import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
// styles
import './index.scss';
// pages
import { App } from '@pages';
// store
import store from './core/store/store';
render(
<Provider store={store}>
<App/>
</Provider>, document.getElementById('app')
);
I checked your code on git repository.我在 git 存储库上检查了您的代码。 I found out that you're exporting the named export
我发现你正在导出命名的导出
export class LoginPage
and the default export,和默认导出,
export default connect(mapProps,dispatchProps)(LoginPage)
But when you're accessing it, you're accessing it as但是当你访问它时,你正在访问它
import { /*Other components*/ , LoginPage } from '@pages'
So it is actually taking the named exported component which is not connected to store.所以它实际上是采用未连接到存储的命名导出组件。
I suggest you to import as我建议你导入为
import LoginPage , { /*Other components*/ } from '@pages'
This might solve your problem.这可能会解决您的问题。
Return statements are missing in the properties of connect. connect 的属性中缺少返回语句。
const mapProps = state => { return {user: state.user} }
const dispatchProps = (dispatch) => {
return {
login: () => dispatch({ type: 'USER_LOGGED_IN', payload: true})
}
}
export default connect(mapProps,dispatchProps)(LoginPage)
Updated: Please check Redux-dispatch更新:请检查Redux-dispatch
try:尝试:
import React, { Component} from 'react';
import { connect } from 'react-redux';
export class LoginPage extends Component<any> {
render(){
console.log('props doesnt contain - login(): ', this.props)
return (
<button onClick={ this.props.login }>Login</button>
)
}
}
const mapProps = state => ({ user: state.user })
const dispatchProps = (dispatch) => ({
login: () => dispatch({ type: 'USER_LOGGED_IN', payload: true})
})
export default connect(mapProps,dispatchProps)(LoginPage)
to return an object with Arrow Functions
you need to wrap your {} with ()要使用
Arrow Functions
返回 object,您需要用 () 包裹您的 {}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.