Is there a way to use this.props.dispatch of the redux store inside Accounts.onEmailVerificationLink ?
I am using React and React-redux inside a Meteor app.
Upon email verification i would like to send data through this.props.dispatch
I'm trying to make this work(if it is even possible):
Accounts.onEmailVerificationLink(function(token, done){
console.log('onEmailVerificationLink token', token)
console.log('this',this)
var outerthis = this
Accounts.verifyEmail(token, function(error){
if(R.isNil(error)){
}else{
console.log('error of verifyEmail', error)
outerthis.props.dispatch(changemainmessage(error.reason))
}
})
done()
})
You need to import your store object from wherever it is defined
import store from '../config/store'
Then you can dispatch an action directly from the store object
store.dispatch(changemainmessage(error.reason));
Read more here
Also, I'd recommend using camelCase for your variables - it's way more readable and follows JavaScript convention
So changemainmessage() would be changeMainMessage()
Related
I am working on an app and getting all the data from API's for different components.And when calling login api I am getting the json as response with user details. I have a component which requires some of the user details to pass to another API to fetch regarding data. Currently I am fetching data of the components by passing actual user details as a parameter to the API, and I want to make it dynamic.
Where Whenever a user will logged in, other API's should dynamically take the required parameters and fetch the json data. How can I achieve this?
Create an async function that logs the user in and on the result, call the second API conditionally with the result of the login call.
async function loginUser (params){
try {
// api call here
// if everything is successful
return {
success:true,
data: userObject
}
} catch(e){
return{
success:false,
error:e
}
}
}
const result = loginUser(params)
if(result.success){
// perform another call whcich requires userObject
}
I would like to create a utility class for accessing my API more easily. Since the API needs credentials I need to access the global context in which user information is stored.
But this API utilities class is not a rendering component, its simply a class with functions that make calls to the API.
So can I still use all the use* functions from within the functions of this class? Or should I call useContext from within the given component function and pass the credentials to the API class?
nope, you just can use hooks in the body of your components, not in normal function/class...
pass your credentials through the parameters or get those from another module.
an example for the second case I mentioned (get credentials from another module):
import cookie from "js-cookie";
function getToken() {
return cookie.get("token");
}
function getUserPermissions(id) {
axios.get("https://blahblahblah.com/.....", {
headers: {
Authorization: `Bearer ${getToken()}`
}
})
}
I would like to call an API resource using meteor and React. What I would like to happen is;
load a page
have a form shown to a user
user submits form
use the form data as parameters for the API call via POST
returns the API response to React.
How do I achieve this? Am I on the right track by using Meteor.wrapAsync?
Meteor.wrapAsync wouldn't be neccesary. If you have a button in React. You should keep the fields in the state. React Forms. Then use this code in your component to call a meteor method.
onClick(e){
e.preventDefault();
const { objectToPost } = this.state;
Meteor.call("some_method", objectToPost, (err, res) => { doSmthWithFrontend });
}
The Meteor method will be called async for you and return when the call returns. In this method you can use Meteor Http to achieve what you want.
I am using the fk_branch_id of the user into redux store when the user login.
And i am initializing jquery datatable in react componentDidMount.
and in datatable initializing i send the fk_branch_id with ajax headers
beforeSend: (request) => {
let branchId = _.isEmpty(this.props.active_branch)?null:this.props.active_branch.branch_id;
request.setRequestHeader("fk_branch_id", branchId);
},
but when the ajax is sent, the fk_branch_id is null because the fk_branch_id from redux state is not loaded yet, so is there any way to insure that the states are fully loaded before componentDidMount are called
You'll need to do this in componentWillReceiveProps or the new getDerivedStateFromProps if the value isn't available yet right after mounting. Detect that fk_branch_id just changed from falsy to truthy:
if (!this.props.fk_branch_id && nextProps.fk_branch_id) {
// send request with nextProps.fk_branch_id
}
fetch() is a great improvement over the classic XMLhttpRequest() However I was wondering if I add window.addEventListener('unhandledrejection', event => ยทยทยท); to my index.android.js and index.ios.js could I theoretically remove all of my .catch() from my promise chains and make a pseudo global promise rejection handler? I am building a react native app that relies heavily on api calls, many of which are authenticated with user tokens. When a user logs in a token is stored in asynchronous storage, but each token will expire after a certain amount of time. if a user opens the app and unwittingly attempts to make a call that requires authentication with an expired token I would like the user to be routed to the login page regardless of what call was made, or what component the call is in. I currently have each individual promise chain handling unauthenticated calls on their own. Is there a better way to do it?
You could make a custom abstraction on top of fetch, which will provide a way of communicating with API and also have some business logic, which for you case is to request an auth token or make a redirect. Then you use this abstraction in the rest of the code to make API calls. Here is a small example to demonstrate the idea:
export default function request(url, options = {}) {
const req = fetch(url)
.then((response) => {
// Global response handler
// ...
// Hand response down the promise chain
return response;
})
.catch((err) => {
// Global error handler
// Check error status and (make redirect/request auth token)
// Throw error down the promise chain if needed
throw err;
});
// Returns a promise
return req;
}
Then you use it in your code like fetch(), but instead you'll be able to modify and extend it for you needs any time.
request('http://example.com/api/post/1')
.then((response) => {
// "response" has whatever you returned from global handler
})
.catch((err) => {
// "err" is whatever you've thrown from global handler
});