how to pass Meteor user data to redux, on initializing react-native app.
Here is my code. I use tracker for subscribe for changes, but it works very strangely. It reacts for changes for only one time.
What is the best way to update the Meteor.user() info in redux store??
export const loadUser = () => dispatch => {
console.log('load user)')
Tracker.autorun(() => {
console.log('datachanges user')
const loginStatus = Meteor.loggingIn();
dispatch({
type: 'USER_LOGGING_IN',
payload: loginStatus
});
});
Tracker.autorun(() => {
console.log('datachanges logins')
const user = Meteor.user()
dispatch({
type: 'USER_DATA',
payload: user,
});
});
};
Related
I know that there are a lot of similar questions but I couldn't find how to dispatch multiple actions.
I have a button. On click I call the function modalOpen which should dispatch two actions - open Modal and send api request.
const modalOpen = async (type) => {
const dispatch = useDispatch();
dispatch({ type: "openModal", payload: true });
dispatch({ type: "getActivity", payload: getNewActivity });
};
Am new to Ngrx, We got stuck with the implementation , Need some help
Architecture:
We are trying to fill the store when the User is authenticated by that time am trying to redirect.
Expectation:
Effects should be called as async and In ui we have to do the redirect
Problem:
Redirection to Homepage is happening only after the ngrx/effect api call is done.
this.userService.authenticateUser(this.userId.toUpperCase(), this.password, (user) => {
this.authenticatedUser = user;
//Call the ngrx dispatchMethod to fill the store
this.router.navigateByUrl("/home");
this.ngrxGetModule_data();
async ngrxGetModule_data() {
this.store.dispatch({ type: Affaire_Action.Affaire_Addstore_Login });
//this.store.dispatch({ type: Affaire_Action.Initial_Store });
}
#Effect()
updateAffaireStore$: Observable<Action> = this.actions$
.ofType(Affaire_Action.Affaire_Addstore_Login)
.map<Action, string>(toPayload)
.switchMap(res => this.affaireService.getAffairesSearchSuggetions('')
//.delay(10000)
.map(res => (
{
type: Affaire_Action.Affaire_on_Success, payload: ({ "parameter": SearchSuggestion, "data": res })
}
)))
.catch(error => Observable.of({ type: Affaire_Action.Affaire_on_Failure, payload: null }))
What are you actually trying with the this.userService.authenticateUser ?
Seems like you are trying to call the function but the way you are doing is wrong.
What is the return type?!!! Observable or promise.
Suggestion: You should call services on you effect and dispatch actions from effect. You can also use this.router.navigateByUrl("/home"); on your effect.
There is such kind of code that I have:
const mapStateToProps = (state, ownProps) => ({
historyData: getHistoryForSavedVariants(state)[ownProps.savedVariant.variantId],
isHistoryLoading: getHistoryLoading(state),
})
const mapDispatchToProps = (dispatch, ownProps) => ({
loadData: () => {
-----> dispatch(loadHistoryForSavedVariant(ownProps.savedVariant))
},
})
export default connect(mapStateToProps, mapDispatchToProps)(HistoryButton)
In another file loadHistoryForSavedVariant is the following:
export const loadHistoryForSavedVariant = (savedVariant) => {
return (dispatch) => {
dispatch({ type: REQUEST_HISTORY })
const url = `/api/saved_variant/${savedVariant.variantId}/saved_variant_history`
new HttpRequestHelper(url,
(responseJson) => {
dispatch({ type: RECEIVE_HISTORY })
dispatch({ type: RECEIVE_DATA, updatesById: responseJson })
},
(e) => {
dispatch({ type: RECEIVE_HISTORY })
dispatch({ type: RECEIVE_DATA, error: e.message, updatesById: {} })
},
).get({ xpos: savedVariant.xpos, ref: savedVariant.ref, alt: savedVariant.alt, familyGuid: savedVariant.familyGuids[0] })
}
}
So, as can be seen dispatch ultimately gets a function - (dispatch) => {...} and not an action. Why? I don't understand how that works. On Redux official webpage I see everwhere that dispatch gets an action and not a function, so I am confused. The code is, of course, working fine, I am just interested in this particular mechanism, in whats happening here.
That is a "thunk function". Thunks are a Redux middleware that allow you to pass functions into dispatch(), which is useful for writing async logic separate from your components.
For more details, see these Redux tutorials:
https://redux.js.org/tutorials/fundamentals/part-6-async-logic
https://redux.js.org/tutorials/essentials/part-5-async-logic
I am having problems with my Axios GET requests taking up to 3-7 seconds to retrieve the data from my Firebase Cloud Firestore Database. I have tried searching up page optimization techniques to speed up my page load such as cacheing resources or image optimization but nothing is helping with the actual request time. The image below is for 1 GET request which pulls an array of objects from the database. It's not as if it's a large array though, there is only 6 objects currently in it and it still takes very long to retrieve. This happens for all of my get requests and I'm not sure why.
It isn't only on initial page load, it still takes a couple seconds (generally 2-5 on subsequent loads) to load in even after refreshing the page or moving between pages on my site. It's not consistent at all and I was wondering if there was anything I can do to improve the request speed.
The Action for the "posts" request above. I am using React Redux to get the json data from Firebase Database and adding it to my store:
// get all posts
export const getPosts = () => (dispatch) => {
dispatch({ type: LOADING_DATA });
axios
.get("/posts")
.then((res) => {
dispatch({
type: SET_POSTS,
payload: res.data,
});
})
.catch(() => {
dispatch({
type: SET_POSTS,
payload: [],
});
});
};
The reducer:
export default function (state = initialState, action) {
switch (action.type) {
case SET_POSTS:
return {
...state,
posts: action.payload,
loading: false,
};
default:
return state;
}
}
Firebase functions:
// fetch all posts
exports.getAllPosts = (req, res) => {
db.collection("posts")
.orderBy("createdAt", "desc")
.get()
.then(data => {
let posts = [];
data.forEach(doc => {
posts.push({
postId: doc.id,
body: doc.data().body,
userHandle: doc.data().userHandle,
createdAt: doc.data().createdAt,
commentCount: doc.data().commentCount,
likeCount: doc.data().likeCount,
userImage: doc.data().userImage
});
});
return res.json(posts);
})
.catch(err => console.error(err));
};
Another example of my GET request to retrieve user data after login:
I am trying to implement a check for authentication and to login/logout users using redux and firebase. I have the following code:
Action Types:
export const LOGIN_REQ = 'AUTH_REQ';
export const LOGOUT_REQ = 'LOGOUT_REQ';
export const AUTH_SUCCESS = 'AUTH_SUCCESS';
export const AUTH_FAILED = 'AUTH_FAILED';
export const GET_AUTH = 'GET_AUTH';
Reducers:
import * as ActionTypes from './ActionTypes';
export const auth = (state = {
isAuth: false,
user: null
}, action) => {
switch (action.type) {
case ActionTypes.LOGIN_REQ:
return { ...state, isAuth: false, user: null };
case ActionTypes.LOGOUT_REQ:
return { ...state, isAuth: false, user: null };
case ActionTypes.AUTH_FAILED:
return { ...state, isAuth: false, user: null };
case ActionTypes.AUTH_SUCCESS:
return { ...state, isAuth: true, user: action.payload };
case ActionTypes.GET_AUTH:
return state;
default:
return state;
}
}
Thunks:
export const getAuth = () => (dispatch) => {
firebase.auth().onAuthStateChanged((user) => {
if (user) {
console.log('Get AUTH called');
dispatch(authSuccess());
}
else {
console.log('Get AUTH called');
dispatch(authFailed());
}
});
}
export const loginReq = (email, password, remember) => (dispatch) => {
firebase.auth().signInWithEmailAndPassword(email, password)
.then((cred) => {
if (remember === false) {
firebase.auth().setPersistence(firebase.auth.Auth.Persistence.NONE);
console.log('Logged In with Redux without persist');
}
else {
console.log('Logging in with Persist');
}
console.log('Dispatching Success !');
dispatch(authSuccess(cred.user.uid));
})
.catch((err) => {
console.log(err);
dispatch(authFailed(err));
});
}
export const logoutReq = () => (dispatch) => {
firebase.auth().signOut()
.then(() => dispatch(getAuth()))
.catch((err) => console.log(err));
}
export const authSuccess = (uid = null) => ({
type: ActionTypes.AUTH_SUCCESS,
payload: uid
});
export const authFailed = (resp) => ({
type: ActionTypes.AUTH_FAILED,
payload: resp
});
And I am calling it from a component as shown below:
const mapStateToProps = state => {
return {
isAuth: state.isAuth,
user: state.user
}
}
const mapDispatchToProps = dispatch => ({
getAuth: () => { dispatch(getAuth()) },
loginReq: (email, password, remember) => { dispatch(loginReq(email, password, remember)) },
logoutReq: () => { dispatch(logoutReq()) }
})
handleLogin() {
this.props.loginReq(this.state.email, this.state.password, this.state.remember);
}
handleLogOut() {
this.props.logoutReq();
}
<BUTTON onClick=()=>this.handleLogOut()/handleLogin()>
I am close to tears because I cannot figure out why my loginReq fires one or many gitAuth() methods even when i click on the button once. This happens only for the loginReq() action. I have not specified anywhere that loginReq() should fire it.
Also i have called the getAuth() method in the component did mount method of my main screen which checks authentication status once at the start of the app.
EDIT: I have console logged in the component did mount method in the main component so I know that this getAuth() call is not coming from there.
Imo the answer is badly done, try to reestructure it better, what you call "Thunks" are actually "Actions". But if I were to tell you something that could help is that maybe the problem lies in the thunk middleware config or with the way firebase is beign treated by the dispatcher, so I would say that you better try coding an apporach with the react-redux-firebase library (this one: http://react-redux-firebase.com/docs/getting_started ) it makes easier to connect redux with a firebase back end. Other great reference, the one that I learned with, is The Net Ninja's tutorial playlist about react, redux and firebase.
A friend of mine told me this has to do with something known as an 'Observer' which is in the onAuthStateChange() provided by firebase. Basically there is a conflict between me manually considering the user as authenticated and the observer doing so.