Skip to content
This repository was archived by the owner on Nov 15, 2022. It is now read-only.
This repository was archived by the owner on Nov 15, 2022. It is now read-only.

use hookrouter with react-redux #166

@helloworld0102

Description

@helloworld0102
//reducer to change open-close flag and message
const initState = {
    open:false,   
    message:""  
}


const snackBarReducer =(state = initState,action)=>{
    switch(action.type){
        case snackBarActionType.ACTION_OPEN:
            return {...state,...action.payload}
        case snackBarActionType.ACTION_CLOSE:
            return initState
        default :
            return state
    }  
}
//first level router
const  routes = {
    '/': () => <Login />,
    '/Main': () => <Main />,
    '/Register*':() => <Register />     //this use * to match second level router!!!!!!!!!
  };
function App() {
  const routeResults = useRoutes(routes)  //use   hookrouter
  const dispatch = useDispatch();
  const snackflag = useSelector(state=>state.snackBarReducer)   //react-redux to controll public snackbar open-close flag and snackbar message
 
  return (
    <div id ='App'>
       {routeResults || <NotFind/>}               //use router to controll  which page to show
       <Snackbar                                           //snackbar(component in material-ui,like Toast in Android)
       autoHideDuration = {1000}   
       message={snackflag.message}           //message property to controll message to show
       open= {snackflag.open}                      //open property to cotroll open-close flag
       onClose = {()=>dispatch({type:snackBarActionType.ACTION_CLOSE,payload:{}})}    
       >
       </Snackbar>
    </div>
  );
}
//second level router in   Register  page  
const a = {
    '/' :()=><MailRegister/>,     //error  occur  in  this  page
    '/PasswordSet' :()=> <PasswordSet/>, 
    '/BaseInfo' :()=> <BaseInfo/>
}
//code in MailRegister
   <button className ={`${classes.btnBase} ${classes.validateBtnCss}`}
            onClick={()=>**sendValidate()**}>Sendvalidata</button>

 sendValidate method:
const sendValidate = ()=>{
      //send request to behind  and show message
      validataSend(mailBox).then((res)=>{
          //change  value  of  snackBarReducer to open snackbar
          dispatch({type:snackBarActionType.ACTION_OPEN,payload:{open:true,message:res.data.message}})
      })
    }

at this time,error occur,when snackbar show,the content in inputbox was cleared,not one inputbox but all inputbox,
so i think this page was re-render,but at this page ,i do not use content of snackBarReducer, i guess, first level router

  • and current path is different??? i am confuse,please help me,thank you,sorry to disturb you。

Below is the page change of mine:
image
image

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions