Application of store Redux in project

First step

stay index Created in store

Front end data is migrated to the back end   utilize react-redux

Created store  use Provider Labels wrap all components and provide store

Put... In other components state The status moves to store In the middle

The second step     Enhanced status

Then apply in the component mapState hold store The values in are mapped to Regist On the body    jmapState Receive one state Parameters     use ...stste.user Get values mapped to props Inside

The third step   Enhancement method

use mapDispatch The act of distributing     receive dispatch Parameters     Execution method   distributed dispatch  To trigger action

At the same time, create another one that is only related to users user  action    Export a function   userFiledUpdate    The receiving parameters are key and value

And then put user action    Import to the registration component and use dispatch To receive action There's a userFiledUpdate（) attribute

Such as this ：onEmailChange:(key,value)=>dispatch(action.userFiledUpdate(key,value))

And then through connect hold React Add these two attributes to the component

export default   connect(mapState,mapDispatch) (Regist)

Step four     Use store Value      reducers Medium USER.JS  

  Pass in the method this.props Get mapdispatch Medium trigger action Methods { Actually... Here key  value Namely action}

By sending with constants action  If your constant is consistent with me user The defined constant is then store in user  reducer The meeting of return down   Conduct

key Dynamic values   Do the mapping  state Overwrite modification （...state,[key]:value)  Take what you pass Email password user name  

Step five ： The registration has been written     Next write to submit the registered

The submit button has a method , And then again dispatch This method is defined in , Through the onsubimt Trigger this method , Then distribute it in the same way action, Trigger action Then execute   Asynchronous network request     Then encapsulate a request  

It says get  post  put  delete Method

And then encapsulate a dedicated user user-requested request, Such as this

  regist:(user)=>apiClient.post('/users',{user}),

In this way, the current end accesses /users When , The backend will also access the backend's routing address users Returns the status value status

If it is equal to 1 Status code   Then jump to the login page .

Step seven ： Add one more RESULT Constant   Then you can query the error object when the constant does not match , And return error messages

Step eight ： Every page has a dough cycle   To realize the registration jump, the registration information should be refreshed after login

Implementation steps ：

1： Define a life cycle   Operate in this cycle before leaving this page , perform onUnload（)

componentWillUnmount(){

    this.props.onUnload()

}

I also buy you to enhance this method on this side , And then use dispatch Trigger action   （ At the same time define a unload Constants allow you to enter ruderx Inside ） Then re initialize state Behavior , That's all right.

Here you can jump to the login page intact .