即使在redux-logger报告有效负载中的正确值的成功调度之后，组件中的Redux状态仍未定义返回

Question

Redux的新手在这里。从后端服务获取值后，无法从组件属性访问值。事实是，正确的值出现在有效负载下的redux-logger中，并且我看到调度成功。

这是我的React组件：

import React from 'react'
import Form from 'react-bootstrap/Form'
import Button from 'react-bootstrap/Button'
import { connect } from 'react-redux'
import { signIn } from '../../redux'

class SignIn extends React.Component{
    constructor(){
        super()
        this.state = {
            emailField: '',
            passwordField: ''
        }
    }

    onEmailChange = (event) => {
        this.setState({
            emailField: event.target.value
        })
    }

    onPasswordChange = (event) => {
        this.setState({
            passwordField: event.target.value
        })
    }

    render(){
        return(
            <div>
                <h1>Sign In</h1>
                <Form>
                    <Form.Group controlId="formBasicEmail" onChange={this.onEmailChange}>
                        <Form.Label>Email address</Form.Label>
                        <Form.Control type="email" placeholder="Enter email" />
                        <Form.Text className="text-muted"></Form.Text>
                    </Form.Group>

                    <Form.Group controlId="formBasicPassword" onChange={this.onPasswordChange}>
                        <Form.Label>Password</Form.Label>
                        <Form.Control type="password" placeholder="Password" />
                    </Form.Group>

                    <Form.Group controlId="formBasicCheckbox">
                        <Form.Check type="checkbox" label="Check me out" />
                    </Form.Group>

                    <Button variant="primary" onClick={() => {
                            this.props.signIn(this.state.emailField, this.state.passwordField)
                            console.log(this.props.userInfo)                        
                        }
                    }>

                        Submit
                    </Button>

                    <Button variant="primary" onClick={() => this.props.signIn(this.state.signIn(this.emailField, this.passwordField))}>
                        Register
                    </Button>
                </Form>
            </div>
        )
    }
}

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

const mapDispatchToProps = (dispatch) => {
    return{
        signIn: (emailField, passwordField) => {
            dispatch(signIn(emailField, passwordField))
        }
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(SignIn)

这是我的动作：

import { SIGN_IN_REQUEST, SIGN_IN_SUCCESS, SIGN_IN_FAILURE } from './signInTypes'
import axios from 'axios'

export const signInRequest = () => {
    return {
        type: SIGN_IN_REQUEST
    }
}

export const signInSuccess = (userInfo) => {
    return {
        type: SIGN_IN_SUCCESS,
        payload: userInfo
    }
}

export const signInFailure = (error) => {
    return {
        type: SIGN_IN_FAILURE,
        payload: error
    }
}

export const signIn = (emailTextField, passwordTextField) => {
    return (dispatch) => {
        dispatch(signInRequest())
        fetch('https://testserver.com/signin', {
            method: 'post',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                email: emailTextField,
                password: passwordTextField
            })
        }).then(response => {
            return response.json()
        }).then(user => {
            if(user.user_id){
                dispatch(signInSuccess(user))
            }
        }).catch(error => {
            dispatch(signInFailure(error.message))
        })
    }
}

这是我的减速器：

import { SIGN_IN_REQUEST, SIGN_IN_SUCCESS, SIGN_IN_FAILURE } from './signInTypes'

const initialState = {
    loading: false,
    userInfo: {},
    error: ''
}

const signInReducer = (state = initialState, action) => {
    switch(action.type){
        case SIGN_IN_REQUEST:
            return{
                ...state,
                loading: true
            }
        case SIGN_IN_SUCCESS:
            return{
                loading: false,
                userInfo: action.payload,
                error: ''
            }
        case SIGN_IN_FAILURE:
            return {
                loading: false,
                userInfo: {},
                error: action.payload
            }
        default:
            return state
    }
}

export default signInReducer

我的期望是this.props.userInfo应该包含有效负载包含的值，但不幸的是，它返回undefined。

感谢您提供的任何帮助！

编辑：这是我的rootReducer：

import { combineReducers } from 'redux'
import signInReducer from './signIn/signInReducer'

const rootReducer = combineReducers({
    signIn: signInReducer
})

export default rootReducer

Answer 1

由于您的根减速器是：

const rootReducer = combineReducers({
    signIn: signInReducer
})

然后userInfo实际上在state.signIn内部，因此mapStateToProps必须像这样：

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