Redux-调度操作(onClick事件)



我只是想通过onClick (event)将我的connect()LoginPage (component)Redux Storedispatch。当我console.log(this.props)时,我的调度处理程序login()不在组件的道具中。

GitHub Repo——https://github.com/jdavis-software/demo.git

问题:为什么我的Redux Store不是connectiondispatching

登录页面:

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配置:

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);

用户缩减器:

// 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;

根页面:

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')
);

我在git存储库上检查了您的代码。我发现你正在导出命名的导出

export class LoginPage

和默认导出

export default connect(mapProps,dispatchProps)(LoginPage)

但当你访问它时,你是以的身份访问它

import { /*Other components*/ , LoginPage } from '@pages'

因此,它实际上是在获取未连接到存储的已命名导出组件。

我建议你作为进口

import LoginPage , { /*Other components*/ } from '@pages'

这可能会解决你的问题。

connect的属性中缺少Return语句。
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)

更新时间:请检查Redux调度

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)

要返回具有Arrow Functions的对象,您需要用((包装您的{}

相关内容

  • 没有找到相关文章

最新更新