Redux - 调度动作（onClick 事件）

Question

我只是想通过onClick (event) 将connect() 我的LoginPage (component) 与我的Redux Store 和dispatch 联系起来。当我console.log(this.props) 我的调度处理程序login() 不在组件的道具中。

GitHub 仓库 -- https://github.com/jdavis-software/demo.git

问题：为什么我的Redux Store 不是connection 或dispatching 操作？

登录页面：

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

Answer 1

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

export class LoginPage

和默认导出，

export default connect(mapProps,dispatchProps)(LoginPage)

但是当你访问它时，你是在访问它

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

所以它实际上是在使用未连接到存储的命名导出组件。

我建议你导入为

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

这可能会解决您的问题。

Answer 2

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)

更新： 请查看Redux-dispatch

Answer 3

尝试：

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 返回一个对象，您需要用 () 包装您的 {}