How to obtain the data generated by reducers in rule through props

How to obtain the data generated by the reducers in rule through props, I believe that many inexperienced people are at a loss about this. Therefore, this paper summarizes the causes and solutions of the problem. Through this article, I hope you can solve this problem.

Because I have been writing ant-design recently, I can't remember the data flow, so I take a note, because I am not good at it, and I am welcome to point out some mistakes.

@ connect (({rule, loading}) = > ({rule,// corresponding to namespace loading: loading.models.rule,}) export default class demo extends React.Component {constructor (props) {super (props);}.... A pile of codes}

After being decorated by connect, the class can get the value through this.props.

At this point we can get the dispatch object.

Const {dispatch} = this.props

Then the method of using dispatch is as follows

Dispatch ({type: 'rule/fetch', params: {url: fullUrl},})

The format of the parameter type is the namespace corresponding to the model file, followed by the corresponding method name.

Params is the parameter we requested.

Next, look at the things in the model file.

Export default {namespace: 'rule', state: {/ / write state}, effects: {* fetch ({params, callback}, {call, put}) {const response = yield call (getPage, params); yield put ({type:' save', params: response,}) If (callback) callback ();

}

Reducers: {save (state, action) {return {... state, data: action.params.data,};},},}

According to the parameters of dispatch, we find the corresponding namespace:rule.

* fetch: is an asynchronous function, shorthand for async fetch. Next, there are two parameters.

Params is the second parameter of dispatch above, and call is used to call the method corresponding to request. Put is to send the result to the reducers below.

Let's talk about how to use these parameters.

Before we look at how params works, let's take a look at how getPage is written.

Import {request} from 'umi';import {stringify} from' qs';export async function getPage (params) {return request (`http://localhost:6200/?${stringify(params)}`)})

Knowing that params is a parameter to getPage, I make a request using request. Outside we got the response.

Then back to effects,put, the result is pushed to reducers, and the parameter type is required to match the function name of reducers.

Next comes reducers, followed by its two parameters, state and action. State is our global state, and we will reload state when we are in return

You can get the response through action.params, and then you can further get its other properties, such as taking another step to get the data property of the data.

Here is a key hint: be sure to pay attention to the cross-domain problem when making a request. Ant-desin has a cross-domain solution, or we can modify the server. If you use flask as the server, you can do this

From flask_cors import * from lxml import etree

App = Flask (_ _ name__) CORS (app, supports_credentials=True)

Then the page will be re-render at this time.

Render () {const source = this.props.rule.data; return (/ / a pile of component information)}

We can get the data generated by reducers in rule through props in the code.

After reading the above, do you know how to get the data generated by the reducers in rule through props? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!