Redux

Question

我对 Redux 有疑问，我找不到哪里出了问题。我的想法：我想显示一条消息取决于用户是否已经存在于我的数据库中。我使用了 redux-react 但它真的让我感到困惑。 1 - 我的行动

import { SET_MESSAGE_SUBMIT} from "./types";

export const msgRegisterSuccess = () => {
    return {
       type: SET_MESSAGE_SUBMIT
    };
 };

2 - 我的减速机

import {SET_MESSAGE_SUBMIT} from "../actions/types";

export default function (state=false,action){
   switch(action.type){
      case SET_MESSAGE_SUBMIT:
         return !state.submitToggle;

      default:
         return state;
   }
};

3 - 我的容器

import React, { useState} from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import { registerUser } from "../../actions/registerActions";

import Validate from "../../components/form/Validate";
import Contact from "../../components/auth/Contact";

const ContactPage = ({ registerUser}) => {
   const [user, setUser] = useState({
      user_name: "",
      email: "",
      message: "",
      errors: {}
   });

   const handleChange = e => {
      setUser({
         ...user,
         [e.target.name]: e.target.value
      });
   };

   const handleBlur = e => {
      const { name, value } = e.target;
      const err = { ...user.errors, ...Validate(name, value).errors };
      setUser({ ...user, errors: { ...err } });
   };

   const handleSubmit = e => {
      e.preventDefault();
      const { user_name, email, message} = user;
      registerUser({ user_name, email, message});
   };

   return (

      <div>
         <Contact
            user={{ ...user}}
            onBlur={handleBlur}
            onChange={handleChange}
            onSubmit={handleSubmit}
         />

      </div>

   );
};

ContactPage.propTypes = {
   registerUser: PropTypes.func.isRequired,
   toggle: PropTypes.object.isRequired,
   errors: PropTypes.object.isRequired
};

const mapStateToProps = state => ({
   errors: state.errors,
   toggle: state.toggle
});

export default connect(
   mapStateToProps,
   { registerUser }
)(ContactPage);

4 - 如果用户数据保存在我的数据库中，我想在其中发送我的 "SET_SUBMIT_MESSAGE" 操作。我知道这个特定的代码片段是错误的:(。我尝试了很多组合，我累了!!

import axios from "axios";
import {SET_MESSAGE_SUBMIT} from "../actions/successMsgActions";


export const registerUser = (userData) => dispatch => {

   axios
      .post("/api/users/signup",userData)
      // .then(dispatch(SET_MESSAGE_SUBMIT))
      .catch(err => {
         dispatch(setErrors(err.response.data));
         // dispatch(SET_MESSAGE_SUBMIT);
      });
   };

有人可以帮助我吗？

纳德'

Answer 1

我发现状态有些不一致

这里是布尔值

export default function (state=false,action){

你在这里 return 状态或布尔值

   switch(action.type){
      case SET_MESSAGE_SUBMIT:
         return !state.submitToggle;

      default:
         return state;
   }

但在组件中你期望对象

const mapStateToProps = state => ({
   errors: state.errors,
   toggle: state.toggle
});

我没有自己尝试所有的代码，但其他人认为似乎还可以。

Redux - 全局概念 - 显示消息取决于布尔值

Redux - Global concept - Display message depends on boolean

connect

reactjs