举例学习redux在react项目中的数据流

简介

今天，React JS是最受欢迎的javascript框架库之一，因为用react js编写代码和制作Web应用程序是如此简单，但在大型react项目中，我们还必须使用redux来管理我们的应用程序的状态。对于初学者来说，开始使用react-redux是具有挑战性和痛苦的，react-redux中最棘手的事情是架构中的数据流。但在这篇博客中，我们将使用redux库创建一个简单的表单，并将表单数据反映到下一个页面，同时了解react-redux应用中的数据流。

你应该知道什么

• 反应
• Redux

Redux架构的组成部分

Store=> Store是一个列出你的应用程序的整个状态的地方。它显示了我们应用程序的状态。

Action=> 行动是使用有效载荷发送或分配给还原器的。

Action Creator=> 这些是简单的js函数，返回一个js对象，也就是一个动作。它提高了代码的可读性和简洁的代码。

Reducer=> Reducer从动作中读取payloads，然后更新应用程序的存储和状态。

****useDispatch=>****useDispatch是一个钩子，用于调度一个动作。

****useSelector=>****useSelector是一个钩子，用于从redux存储中获取状态。

UI组件

在这篇博客中，我们将创建两个组件。

1. 用户详情表
2. 用户资料页面

这是我们的UserDetails Form组件

function UserDetail() {
  const navigate = useNavigate();

  const [Name, setName] = useState("");

  const [Email, setEmail] = useState("");

  const [Password, setPassword] = useState("");

  const next = () => {
    navigate("/profile");
  };

  return (
    <div className="bg-color-home">
      <form id="form" className="validate">
        <div className="form-field">
          <label>Full Name</label>
          <input
            value={Name}
            onChange={(e) => setName(e.target.value)}
            type="text"
            name="full-name"
            id="full-name"
            placeholder="Joe Bloggs"
          />
        </div>
        <div className="form-field">
          <label>Email</label>
          <input
            value={Email}
            onChange={(e) => setEmail(e.target.value)}
            type="email"
            name="email-input"
            id="email-input"
            placeholder="example@domain.com"
          />
        </div>
        <div className="form-field">
          <label>Password</label>
          <input
            value={Password}
            onChange={(e) => setPassword(e.target.value)}
            type="password"
            name="password-input"
            id="password-input"
          />
        </div>
        <div className="form-field">
          <label></label>
          <input onClick={next} type="submit" value="Submit" />
        </div>
      </form>
    </div>
  );
}

export default UserDetail;

这是用户配置文件组件

function Profilepage() {
  const navigate = useNavigate();

  const Home = () => {
    navigate("/");
  };

  return (
    <div className="bg-color">
      <form id="form" className="validate">
        <div className="form-field">
          <label>Full Name :</label>
          <label>Full Name :</label>
        </div>
        <div className="form-field">
          <label>Email :</label>
          <label>Email :</label>
        </div>
        <div className="form-field">
          <label>Password :</label>
          <label>Password :</label>
        </div>
        <div className="form-field">
          <label></label>
          <input onClick={Home} type="submit" value="Home" />
        </div>
      </form>
    </div>
  );
}

export default Profilepage;

减速器

现在我们的还原器将是简单的，将不包含任何初始状态，根还原器将返回默认情况。

import * as types from "../action/types";

const initialState = {
};

export const rootReducer = (state = initialState, action) => {
  switch (action.type) {
    default:
      return state;
  }
};

存储

import { createStore } from "redux";
import { rootReducer } from "./reducer/reducer";

export const store = createStore(rootReducer);

使用useDispatch和动作创建者和类型将数据发送到redux商店

我们必须使用useDispatch来发送表单数据到reducer，并将数据保存在redux存储中。但首先我们必须创建两个文件，第一个文件是动作创建者函数，第二个文件是类型，它将包含我们所有的动作类型名称。

动作创建者

import * as types from "./types";

export const Form_Data = (data) => ({
  type: types.Form_Data,
  payload: data,
});

类型

export const Form_Data = "form_data";

useDispatch

在创建了动作创建器和类型文件后，现在使用动作创建器我们将调度我们的表单数据。当我们触发下一个函数时，我们的调度函数将被调用，我们的动作创建者函数将包含两样东西类型和有效载荷，这里我们在类型中提到了动作名称，在有效载荷中提到了数据，然后动作将被发送到还原器。

import { useDispatch } from "react-redux"; // First import the useDispatch

function UserDetail() {
  const dispatch = useDispatch();

const next = () => {
    let data = {
      name: Name,
      email: Email,
      password: Password,
    };
    dispatch(Form_Data(data));
  };
return (<> JSX </>)
export default UserDetail;

更新还原器

现在我们也要更新还原器。首先，我们将添加初始状态，然后我们将更新根减速器函数。

import * as types from "../action/types";

const initialState = {
  userData: {},
};

export const rootReducer = (state = initialState, action) => {
  switch (action.type) {
    case types.Form_Data:
      return { ...state, userData: action.payload };
    default:
      return state;
  }
};

使用useSelector获取表单数据

现在我们的表单数据已经成功地保存在商店中，现在剩下的最后一件事就是使用useSelector获取状态并显示在用户配置文件页面上。

import { useSelector } from "react-redux";

function Profilepage() {

const userData = useSelector((state) => state.userData); //fetching the state

return (
    <div className="bg-color">
      <form id="form" className="validate">
        <div className="form-field">
          <label>Full Name :</label>
          <label>{userData.name}</label>
        </div>
        <div className="form-field">
          <label>Email :</label>
          <label>{userData.email}</label>
        </div>
        <div className="form-field">
          <label>Password :</label>
          <label>{userData.password}</label>
        </div>
        <div className="form-field">
          <label></label>
          <input onClick={Home} type="submit" value="Home" />
        </div>
      </form>
    </div>
  );
export default Profilepage;

总结

在这篇博客中，我们学习了redux在react项目中的数据流，但我们会通过更多的练习来清楚地了解react-redux中的数据流，所以请继续练习。