Redux:TypeError:e未定义

问题：当我使用connect方法在容器区域中使用分派包装我的action creator时发生-我遵循了redux文档中的样式

我正在使用redux和redux thunk。我正在尝试创建一个登录操作，到目前为止，当我分派一个操作时，它不起作用，而这个分派是另一个

LoginContainer.js

import CONFIG from "../../../config";

import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';

import {authenticateUser} from "../../../actions/authenticateUser";

import Login from '../../../components/views/login/Login'

import {store} from '../../../store';

function handleSubmit(e) {
    e.preventDefault();
    let calpersId = parseInt(e.target[0].value || e.target[1].value, 10) || 0;
    store.dispatch(authenticateUser(calpersId))
}

const mapStateToProps = (state) => {
    return {
        authentication: state.authentication
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        handleSubmit: (e) => {dispatch(handleSubmit(e))}
    }
}

const LoginContainer = connect(mapStateToProps, mapDispatchToProps)(Login);

export default LoginContainer;

authenticateUser.action.js

import CONFIG from '../config'

export const AUTHENTICATE_USER = 'AUTHENTICATE_USER'

export const initiateUserAuthentication = (token) => ({
    type: AUTHENTICATE_USER,
    token
})

export const AUTHENTICATATION_SUCCEEDED = 'AUTHENTICATATION_SUCCEEDED'

export const authenticatationSucceeded = (payload) => ({
    type: AUTHENTICATE_USER,
    payload
})


export const USER_ID_DOES_NOT_EXIST = 'USER_ID_DOES_NOT_EXIST'

export const userIdDoesNotExist = (uid) => ({
    type: USER_ID_DOES_NOT_EXIST,
    uid,
    message: "User id does not exist"
})

export function authenticateUser(id) {
    return function (dispatch) {
        let guidMap = {
            7103503579: "dad08fde-0ac1-404a-ba8a-cc7c76d5810f",
            6632408185: "6632408185-guid",
            6581985123: "6581985123-guid",
            1226290314: "a3908aa7-c142-4752-85ea-3741cf28f75e",
            4618604679: "4618604679-guid",
            6452522440: "6452522440-guid",
            3685610572: "3685610572-guid",
            5564535492: "5564535492-guid",
            5600493427: "5600493427-guid",
            3996179678: "3996179678-guid",
            7302651964: "7302651964-guid",
            3148148090: "3148148090-guid",
            5826752269: "5826752269-guid",
            6827859055: "6827859055-guid",
            1677401305: "1677401305-guid",
            2640602392: "dbed1af6-0fc9-45dc-96a3-ab15aa05a7a2",
            6474994805: "6474994805-guid"
        };
        let guid = guidMap[id]
        return fetch(CONFIG.API.MY_CALPERS_SERVER.LOCATION + 'ept/development/rest/simulatedAuth.json?guid=' + guid, {
            credentials: 'include'
        })
            .then(
                response => response.json(),
                error => console.log('An error occured.', error))
            .then(json => {
                document.cookie = "authentication=" + guid + "; max-age=" + (60 * 30);
                dispatch(authenticatationSucceeded(json))
            })
    }
}

authenticateUser.reducer.js

import {AUTHENTICATE_USER, AUTHENTICATATION_SUCCEEDED} from "../actions/authenticateUser";

const initialState = {
    calpersIds: [
        5600493427,
        6474994805,
        6452522440,
        5564535492,
        6632408185,
        4618604679,
        5826752269,
        3996179678,
        7302651964,
        1677401305,
        6827859055,
        3685610572,
        6581985123,
        3148148090
    ],
    guidMap: {
        7103503579: "dad08fde-0ac1-404a-ba8a-cc7c76d5810f",
        6632408185: "6632408185-guid",
        6581985123: "6581985123-guid",
        1226290314: "a3908aa7-c142-4752-85ea-3741cf28f75e",
        4618604679: "4618604679-guid",
        6452522440: "6452522440-guid",
        3685610572: "3685610572-guid",
        5564535492: "5564535492-guid",
        5600493427: "5600493427-guid",
        3996179678: "3996179678-guid",
        7302651964: "7302651964-guid",
        3148148090: "3148148090-guid",
        5826752269: "5826752269-guid",
        6827859055: "6827859055-guid",
        1677401305: "1677401305-guid",
        2640602392: "dbed1af6-0fc9-45dc-96a3-ab15aa05a7a2",
        6474994805: "6474994805-guid"
    },
    authToken: null,
    isAuthenticated: false
};
//@TODO: All fetches, create a seperate reducer for store?
export function authenticateUser(state = initialState, action) {
    switch(action.type) {
        case AUTHENTICATE_USER:
            return Object.assign({}, state, {
                authToken: action.token,
            })
        case AUTHENTICATATION_SUCCEEDED:
            return Object.assign({}, state, {
                authToken: action.payload.guid,
                isAuthenticated: true,
                payload: action.payload
            })
        default:
            return state;
    }
};

---

原来我调用的是一个不存在的操作创建者，我只需要将分派传递给处理程序，让它处理事件

Login.js

import CONFIG from "../../../config";

import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';

import {authenticateUser} from "../../../actions/authenticateUser";

import Login from '../../../components/views/login/Login'

function handleSubmit(e, dispatch) {
    e.preventDefault();
    let calpersId = parseInt(e.target[0].value || e.target[1].value, 10) || 0;
    dispatch(authenticateUser(calpersId))
}

const mapStateToProps = (state) => {
    return {
        authentication: state.authentication
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        handleSubmit: (e) => {handleSubmit(e, dispatch)}
    }
}

const LoginContainer = connect(mapStateToProps, mapDispatchToProps)(Login);

export default LoginContainer;

---

正确的方法是什么？我使用了bindActionCreators，这会产生相同的结果。

您不应该像现在这样使用connect-mapDispatchToProps。 此回调应该创建或使用将分派操作的函数

对于您的案例，您可以这样使用：

const mapDispatchToProps = (dispatch) => {
    return {
        authenticate: calpersId => authenticateUser(calpersId)(dispatch)
    }
}

在您的组件中，有一个处理提交的函数/方法：

class Login extends Component {
  ...
  handleSubmit = e => {
    e.preventDefault();
    const calpersId = parseInt(e.target[0].value || e.target[1].value, 10) || 0;
    this.props.authenticate(calpersId)
  }
  ...

---

顺便说一句，减缩器应该表示实体的状态。名为autenticateUser的实体非常模糊。您应该可能将其命名为用户。您应该阅读更多的redux示例，以真正理解最初有点复杂的概念。Youtube上有很多不错的视频。

知道了。我查看了代码，并按照代码理解了概念。有道理。因为我认为逻辑应该在容器中，当视图被替换时，它不应该受到任何缺少的函数、变量等的影响。