I have defined following mapHooks:
const mapHooks = {
fetch: ({ dispatch, params }) => dispatch(fetchPost(params.postId)).catch(() => {
console.log('catch');
}),
};
Sometimes, post cannot be found and I'd like to redirect user to the another page.
When I catch the error I tried to call push('/foo') to redirect to /foo page, but it does nothing (push comes from react-router-redux.
How can I redirect user properly ?
push function that comes with react-router-redux is an action creator, meaning that it returns an action that you need to dispatch. So you need to call it like this: dispatch(push('/foo'))
Also, check if you have your routerMiddleware installed correctly.
Related
I am trying to integrate Keycloak login into my React app and I'm trying to get the JWT from keycloak. Here is the code:
const [keycloakState, setKeycloakState] = useState<any>();
const login = () => {
const keycloak = Keycloak("/keycloak.json");
keycloak.init({onLoad: 'login-required'}).then(authenticated => {
console.log('kk', keycloak)
console.log('at', authenticated)
setKeycloakState({ keycloak: keycloak, authenticated: authenticated });
}).catch(err => {
alert(err);
});
console.log('log after')
}
The login function is triggered when a button is clicked. It redirects properly to keycloak, I can log in and I am properly redirected to the app. The problem is that after the redirect back to the app with proper login the code in the then part of the chain is not executed, and even the 'log after' does not appear in the logs. The catch error part works fine.
Why might this be happening? I have keycloak-js added to my project.
I used to face this problem before. The way that I passed is separating the "init" function and then invoke it later.
Here is my example on jsFiddle: 'https://jsfiddle.net/gzq6j3yu/1/'
Our solution was to use the functions onAuthSuccess and onAuthError avaliable on the KeycloakInstance keycloak-js provides. (The documentation around this is a little shaky but you can find them if you check out the source code.) As the names imply these functions get called when an auth attempt is successful or unsuccessful, respectively.
note: in the following snippets this._instance replaces OP's keycloak constant.
Basic code snippet:
import Keycloak from 'keycloak-js';
...
// pulled from a class's init function from a custom Keycloak helper class so won't translate one for one but you get the point.
this._instance = Keycloak(configObject);
this._instance.onAuthSuccess = () => {
// code to execute on auth success
};
this._instance.onAuthError = () => {
// code to execute on auth error
};
this._instance.init(initOptions)
...
We also had a getter to get the token on the KeycloakInstance (or empty string) on the same class. This is an easy way to refer to the token in your code to check if it actually exists, etc. Here's what that'd look like inside the class.
get token() {
return this._instance ? this._instance.token : '';
}
Hope this can help out some folks.
I think the reason your fulfilled callback is not executed is the way your app interacts with Keycloak. You initialize the Keycloak-Adapter with onLoad: 'login-required' which will redirect the user to Keycloak - which means the Javascript execution is interrupted at this point. Keycloak will redirect the user back to your app and since you wrapped the Keycloak-Adapter in a function which is only executed when a button is clicked, the promise callback is not executed.
Simple example:
// do this on page load
keycloak.init({onLoad: 'login-required'}).then((authenticated) => {
console.log('authenticated', authenticated)
})
You will not see a "authenticated", false in your console when you open up your app. If the user is not authenticated, he will be redirected (so no chance to execute that callback). If he then comes back and is authenticated, the callback will be executed and authenticated should be true.
If you want the user to click a button, a setup like this should work:
// do this somewhere early in your App or main.js and in a way that this code is executed on page load
const keycloak = new Keycloak(configuration);
keycloak.init({onLoad: 'check-sso'}).then((authenticated) => {
if (authenticated) {
// do what needs to be done if sign in was successful, for example store an access token
} else {
// handle failed authentication
}
}).catch(err => {
alert(err);
});
const login = () => { // this could be an on-click event handler
keycloak.login();
};
check-sso won't redirect the user to Keycloak if unauthenticated, so the user can trigger the login when needed.
Keep in mind that your JavaScript code will run twice and you have to cover both cases, first the user is not authenticated and needs to be redirected to Keycloak and a second time once the user comes back from Keycloak (then we should get the information that the user is authenticated in .then().
Essentially I am trying to edit a user, and calling the editUser method in my authService. Edit user in the auth service is just a HTTP post request.
this._authService.editUser(this.edit).subscribe(res=>{this.getUsers(this.params)}, (err)=>{alert(err)})
Now after editing the user, I wanna refresh the entire User list again. therefore I am calling the getUser method inside the .subscribe next field. The getUser method in the authservice is also a HTTP POST request.
getUsers(search){
this._authService.getUser(search).subscribe(
res => {
this.persons = res
},
error => {
if(error.status == 0) {
alert("The servers are down right now, try again later")
}
else{
alert(error.error.msg)
}
}
);
}
The problem with this is that it doesnt always refresh the persons list. Sometimes it does and sometimes it doesnt
I am working on a React/Redux excercise. It works for the most part, but I'm having trouble with the useHistory hook. I have a login form that receives a username and password, then it sets a token in the browser local storage. login() is a POST fetch request that works and sets the storage successfully. Then I have a Home component that checks for the token. If there's a token, the page should load, if there's no token, it should redirect to the login page. The problem is history.push() is executing before my token is set, thus sending me back to the login form. To make things even worse, the token actually gets set, but only AFTER the -undesirably early- redirect to the login form. If I try to log in again, it works, but only because the token was already there. So to make the question short, how can I make history.push() wait for the token before redirecting?
Here's my form submission function:
const handleSubmit = e => {
e.preventDefault();
props.login(state.userName, state.password); // This sets the token
history.push('/home'); // This is happening before the token is set
}
if login is an async function you can try this
const handleSubmit = e => {
e.preventDefault();
props.login(state.userName, state.password)
.then(history.push('/home')); //waits until promise resolves
}
Still getting used to this.
I have checked out questions here and here and I still feel uncomfortable about how to go about this. These are not clear from my perspective.
Basically I have clicked on the "Login" button and have requested a JWT login token and succesfully received it. What I have noticed is that I can at this point download those rarely changed lists like states or suburbs/postcodes which are large (the latter) and should be at the spa's immediate use rather than tacking it onto a call for a client.
I want to, upon successfully receiving the token immediately do an API call for those lists and store them in local storage. There is no "event" it should fire straight after a successful retreival of a JWT...
Here is the action for retreiving a JWT in react:
export const requestLoginToken = (username, password) =>
(dispatch, getState) => {
dispatch({type: REQUEST_LOGIN_TOKEN, payload: username})
const payload = {
userName: username,
password: password,
}
const task = fetch('/api/jwt', {
method: 'POST',
body: JSON.stringify(payload),
headers: {
'Content-Type': 'application/json;charset=UTF-8'
},
})
.then(handleErrors)
.then(response => response.json())
.then(data => {
dispatch({type: RECEIVE_LOGIN_TOKEN, payload: data})
saveJwt(data)
})
.catch(error => {
clearJwt()
dispatch({type: ERROR_LOGIN_TOKEN, payload: error.message})
})
addTask(task)
return task
}
I beleive the place for adding a second API call would be after "saveJwt()" but how.
Do/can I send it off to another export const action/function in another part of the application?
If I write something similar to this and by putting the name of the function in with a parameter of "JWT" eg
.then(retrieveSelectData)
that it will go off to that separate folder with that export function and execute an API call at the same time applying a dispatch...and then return..
Could some one outline if this is a correct and reasonable way of making two API calls as one. I still have to get the JWT (and use it in the second) so I cant do the second call without the first.
If i understand your goal correctly, what you need here is a middleWare that will catch all actions that dispatched before the reducers catches them and can accept functions and holds a ref to the dispatcher.
Note that reducers can only accept actions that are plain objects and can't accept functions.
Enters redux-thunk, a middleware that does just that (and more) in only 11 lines of code.
It catches all actions (before the reducers) and checks to see if this action === 'function'.
If it is a function then it will call that function with dispatch as the argument.
If it's not a function it will leave it alone and let the reducers do their job.
Something like this:
function loadSomeThings() {
return dispatch => {
fetchFirstThingAsync.then(data => { // first API call
dispatch({ type: 'FIRST_THING_SUCESS', data }); // you can dispatch this action if you want to let reducers take care of the first API call
return fetchSecondThingAsync(data), // another API call with the data received from the first call that returns a promise
})
.then(data => {
dispatch({ type: 'SECOND_THING_SUCESS', data }); // the reducers will handle this one as its the object they are waiting for
});
};
}
I have a react js app where the user can create a user and then i make a http post to the backend.
i have a action that looks like this
export function createUser(name, username, password) {
dispatcher.dispatch({
type: "CREATE_USER",
name,
username,
password,
});
}
then in my store i call action and it triggers a function that makes a http post to the backend that looks like this
handleActions(action) {
switch(action.type) {
case "CREATE_USER": {
this.createUser(action.name, action.username, action.password);
break;
}
default:
}
}
should i make the ajax call in the store or in the action it self?
First of all you would want redux-thunk which give you opportunity to create actions which dispatches other actions in async way.
After this you can create an action which make a call to server, and on result dispatch new action which would bring to store new data. For example:
getData(param) {
return (dispatch) => {
dispatch(dataRequestAction());
return fetch(`/data/${param}`)
.then(r => r.json())
.then(data => dispatch(setDataAction(data)))
.catch(err => dispatch(errroDuringRataRetrieving(err)))
};
}
as you see here you have one action (getData) which actually doesn't change the store, but trigger 'dataRequestAction' which put in to store data that request started. Then if request completed one of action can be triggered:
setDataAction - if all ok;
errroDuringRataRetrieving - if request failed.
In this way you can handle ajax via redux.
I think we should have seperate folder called api. There we will have our all api calls. We can inject those file and call those function where we put our functions which call api and respond action.