在 React Redux 中存储用户信息的最佳方式是什么？

Question

我正在学习 React Redux。我很难学习它。请原谅我的代码有多糟糕，因为我几天前才开始学习，我想为登录用户建立一个商店。它将包含他们的用户名、电子邮件等。目前我没有使用会话/cookie，甚至没有为用户使用数据库。我只是想学习 Redux。

我需要一些帮助。状态可以包含许多对象。我只想为用户提供一个对象。而且因为我目前遇到了麻烦，我如何显示用户名而不必 .map() 因为状态是一个数组？

这是我当前的动作/减速器代码。

import { combineReducers } from "redux";

const defaultUser = [];

// Actions
const LOGIN_USER = "LOGIN_USER";

export function loginUser(user) {
    return {
        type: LOGIN_USER,
        user,
    };
}

// Reducers
function user(state = defaultUser, action) {
    switch (action.type) {
        case LOGIN_USER:
            return [
                ...state,
                {
                    username: action.user,
                },
            ];
        default:
            return state;
    }
}

const usersStore = combineReducers({ user });

export default usersStore;

这是 App.js 文件，我希望用户在输入框中输入用户名，然后打印出他们的用户名。

import React, { useState } from "react";
import { useDispatch, useSelector } from "react-redux";

import "./App.css";

import { Sidebar } from "./components/Sidebar/Sidebar";
import { Content } from "./components/Content/Content";

import { loginUser } from "./store";

const App = () => {
    const [user, setUser] = useState("");

    const selectedUser = useSelector((state) => state.user);
    const dispatch = useDispatch();

    const handleSubmit = (event) => {
        event.preventDefault();
        dispatch(loginUser(user));
        setUser("");
    };

    return (
        <div>
            <form onSubmit={handleSubmit}>
                <input
                    type="text"
                    onChange={(e) => setUser(e.target.value)}
                    value={user}
                />
                <br />
                <input type="submit" />
            </form>
            <br />
            <br />
            {selectedUser.map((selectUser) => (
                <li key={selectUser.username}>
                    <h3>{selectUser.username}</h3>
                </li>
            ))}
            <Content />
        </div>
    );
};

Answer 1

我自己想出来的。使用我的新设置，我所要做的就是输入 {user.username} 来获取登录用户的用户名。我正在使用 useSelector() 获取它。

它基本上将用户名暂时设置为状态，然后通过 dispatch 将其发送到 store，然后清空状态。

我必须将初始状态更改为其中包含“配置文件”的对象（而不是使用数组） 然后我必须使用函数将状态映射到我希望它显示的组件的道具，然后在导出它时使用 connect()。

这是我的新组件代码，最下面几行是最重要的：

import React, { useState } from "react";
import { connect, useDispatch, useSelector } from "react-redux";

import "./App.css";

import { Sidebar } from "./components/Sidebar/Sidebar";
import { Content } from "./components/Content/Content";

import { loginUser } from "./store";

const App = (props) => {
    const [stateUser, stateSetUser] = useState("");

    const user = useSelector((state) => state.user.profile);
    const dispatch = useDispatch();

    const handleSubmit = (event) => {
        event.preventDefault();
        dispatch(loginUser(stateUser));
        stateSetUser("");
    };

    return (
        <div>
            <form onSubmit={handleSubmit}>
                <input
                    type="text"
                    onChange={(e) => stateSetUser(e.target.value)}
                />
                <input type="submit"></input>
            </form>
            {user.username}
            <Content />
        </div>
    );
};

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

export default connect(mapStateToProps)(App);

我的 reducer/actions 文件：（初始状态的变化是最重要的）

import { combineReducers } from "redux";

const initialState = {
    profile: {
        username: "",
        email: "",
        profileImage: "",
    },
};

// Actions
const LOGIN_USER = "LOGIN_USER";

export function loginUser(user) {
    return {
        type: LOGIN_USER,
        user,
    };
}

// Reducers
function user(state = initialState, action) {
    switch (action.type) {
        case LOGIN_USER:
            return {
                ...state,
                profile: { username: action.user },
            };
        default:
            return state;
    }
}

const usersStore = combineReducers({ user });
export default usersStore;