React is a headache to learn, and many concepts don't seem to be clear.

Family bucket

    "react": "^16.2.0",
    "react-dev-utils": "^5.0.0",
    "react-dom": "^16.2.0",
    "react-redux": "^5.0.7",
    "react-router-dom": "^4.2.2",
    "redux": "^3.7.2",
    "redux-thunk": "^2.2.0",

what is all this?

Vue is much more friendly, and most of them can get started with a tutorial.

< H2 > status Management < / H2 >

Vue has officially assigned four operations, and the data storage and operation are clear at a glance.
then learn react now and follow a tutorial

import axios from "axios";
import {getRedirectPath} from "../util.js";

const REGISTER_SUCCESS = "REGISTER_SUCCESS"
const ERROR_MSG = "ERROR_MSG"

const initState = {
  redirectTo: "",
  isAuth: false,
  msg: "",
  user: "",
  pwd: "",
  type: "",
}


// reducer
export function user(state = initState, action) {
  switch(action.type) {
    case REGISTER_SUCCESS:
      return {...state, msg:"",redirectTo:getRedirectPath(action.payload) , isAuth:true, ...action.payload}
    case ERROR_MSG:
      return {...state, isAuth:false, msg:action.msg}
    default:
      return state
  }
}

function registerSuccess(data) {
  return {type:REGISTER_SUCCESS,payload:data}
}

function errorMsg(msg) {
  return {msg, type:ERROR_MSG}
}

export function regisger({user, pwd, repeatpwd, type}) {
  if (!user || !pwd || !type) {
    return errorMsg("")
  } else if (pwd !== repeatpwd) {
    return errorMsg("")
  }
  return dispatch => {
    axios.post("/user/register", { user, pwd, type }).then(res => {
      if (res.status === 200 && res.data.code === 0) {
        dispatch(registerSuccess({user,pwd,type}))
      } else {
        dispatch(errorMsg(res.data.msg))
      }
    })
  }
}

what on earth is dispatch doing?

< H2 > component passes values < / H2 >

Vue: parent to child : child component data name = "parent component data name"
event name passed by the child to the parent @ child component = "event name defined by the parent component" this.$emit ("event name passed by the child component", data)
react: this.props.history.push ("/ register") what is stored in this props? Why is there a history function and a string like this.props.msg ?

The

tutorial introduces so many plug-ins what do the imported functions in each plug-in do?
you tell me that this function of the plug-in is used here, but what exactly does it do? What problem do you want to solve?

Vue something a code explains clearly, react wants to write notes do not know where to start, a smell of strong coupling
now I always feel that there is something missing, the concept does not seem to be clear. Do you have any suggestions?