React Redux 道具始终未定义

Question

用户始终未定义。反应 + 终极版。这是我第一天使用 Redux。这是我的减速器。

const initialState = {
    user: 'User'
}

export function auth(state = initialState, action: any) {
    const {type, payload} = action;

    switch (type) {
        case "REGISTER_SUCCESS":
            return {
                ...state,
                user: payload.user,
            };
        case "REGISTER_FAIL":
            return {
                ...state,
                user: null,
            };
        case "LOGIN_SUCCESS":
            return {
                ...state,
                user: payload.user,
            };
        case "LOGIN_FAIL":
            return {
                ...state,
                user: null,
            };
        case "LOGOUT":
            return {
                ...state,
                user: null,
            };
        default:
            return state;
    }
}

console.log 总是 return “用户 {user: undefined, dispatch: ƒ}”。虽然他好像无论如何都要输出点什么。这是我的登录组件。

import React, {SyntheticEvent, useState} from 'react';
import {Password} from "../../../ui/input/password/password";
import {Button} from "../../../ui/button/button";
import {Input} from '../../../ui/input/input';
import {Text} from "../../../ui/text/text";
import {NavLink} from "react-router-dom";
import {connect} from "react-redux";
import {login as onHandleLogin} from "../../../core/redux/actions/auth";
import {useDispatch} from "react-redux";

function SignInForm(props: any)  {
    const [login, setLogin] = useState<string>("")
    const [password, setPassword] = useState<string>("")
    const dispatch = useDispatch()

    function onHandleSubmit(e: SyntheticEvent) {
        e.preventDefault()

        dispatch(onHandleLogin(login, password))
    }

    function onHandleCheck() {
        return !(login && password)
    }

    console.log('User', props)

    return (
        <>
            <form onSubmit={onHandleSubmit}>
                <h1>Sign In</h1>
                <Input setValue={setLogin} value={login} label="Login"/>
                <Password
                    label="Password"
                    setValue={setPassword}
                    value={password}
                />
                <Button disabled={onHandleCheck()} text="Sign In"/>
                <Text>Not a member yet? <NavLink to="/register">Sign up</NavLink></Text>
            </form>
            <span>User: {props.user}</span>
        </>
    );
}

const mapStateToProps = (state: { user: any; }) => {
    return {
        user: state.user
    };
}

export default connect(mapStateToProps)(SignInForm)

正如我所说，这是我第一次接触 Redux。我很乐意提供任何帮助。 TY)

编辑

roodReducer:

import {combineReducers} from "redux";
import {auth} from "./reducers/auth";

export default combineReducers({
    auth,
})

Answer 1

以下代码是您的场景的一个小实现。该代码使用 connect HOC 从 redux 中获取数据。

注意：注释的代码是使用useSelector的代码。随意使用两者中的任何一个请参考代码： https://stackblitz.com/edit/react-8ivxam

React Redux 道具始终未定义

React Redux props is always udefined

reactjs

redux