currently looking in to making a new web app with Firebase, React and re-base or reactfire. I understand that Flux when used with Firebase does not make complete sense, and they don't work well together. My question is, if I do not use Flux or Redux, but instead just re-base or reactfire how do I control the page's state? For instance, knowing a drop down is active.
IMO, knowing a drop-down is active is perfectly managed by using React, without the use of redux or flux and regardless of what backend you are using.
For example (and I'm making some assumptions here what functionality you want precisely):
Set your initial state to { ddActive: false }
Then setState({ ddActive: true }) on clicking the dropdown button
Then, on clicking anywhere, setState({ ddActive: false }) again
Hope this helps!
Related
I've just setup my Redux store in React native app.
I moved to initialize React navigation for my project, i though that, as long as i'm using Redux to manage my app state, then the default option is that redux also is taking care of Navigation, and it should be hooked up to Redux, i opened React navigation docs, it says literally:
"Think twice before you consider doing this, there is an incredibly good chance that you do not need to do t his!"
So, is it a good practice to manage navigation with Redux, or just implement basic navigation the normal way (outside Redux) ?
Thanks in advance.
React Navigation manages its own state internally (using its own redux store I think...). There's no real need to connect react-navigation state to your own app's redux store since they expose API to do everything you might need to even without the navigation prop. Also it looks like they're dropping support for redux integration in the next version so beware of deprecation.
This is one of those cases where people may introduce unnecessary complexity and research into the project just to be happy about how "neat" the code runs even when it doesn't offer any real deliverable.
I am trying to make an app for my billiards league using React and Firebase. I want to have users log in and THEN be able to see the full app (calculator for determining races, schedules, teams, etc.). I am storing the status of whether someone is logged in or not in the parent component's state (e.g.: this.state = { loggedIn: true }). The Firebase login/logout works just fine, as does the React conditional rendering of components based off the aforementioned state. The state defaults as false and changes to true based on firebase.auth().onAuthStateChanged (which also functions just fine).
The problem I'm having is that there's currently nothing stopping an enterprising individual - one who has no account with my app and is not logged in - from opening the React dev tools and toggling loggedIn to true, and thus revealing all the goodies.
I've viewed a number of tutorials (like this CC-Tricks one) for React and Firebase that say to do exactly that - store the authentication status in the component state. I also think there is an easy way to do what I need my app to do, but I probably am just overthinking/ too noob. Any pointers?
I have a React app using Redux to handle the overall state of the app that also integrates some legacy Javascript library to present a specific viewer (on a canvas). The legacy library manages for the viewer its own state (and I don't have access to it). I now have the case that one of my components need to trigger an event on the viewer in another component (e.g. reset the viewer using the legacy library).
I can think of two solutions:
Do a Redux state change (e.g. {reset: true}) that is provided to the viewer component via props. And after the viewer component reseted the viewer, it directly resets the state itself (e.g. `{reset: false}).
Bypass Redux and use some kind of PubSub pattern for those components to communicate directly to each other without any Redux state change.
Is there recommended way? What are the advantages/disadvantages? One downside of option 1 seems that it triggers a re-render when the state is updated the second time ({reset: false}).
Another way i have come up is by specifying the time at which it got reset.
If the time changes this will trigger a re-render.
on dispatch(reset())
Action:
reset(){
return({
type:constant.RE_RENDER,
payload: new Date().getTime()
})
}
STORE:
if(state.reset < action.payload){
return {
reset: action.payload
}
}
The view will get updated only once. Using another pub-sub system will add undue complications and bypassing redux pattern is not recommended.
For example if I would like the url to automatically change to /jeans/black whenever state.filters == {type: jeans, color: black}
The only way I know how to do it would be to do window.location = someNewLocation every time a click happens, and make up a url based on state.
But I feel like there must be some in built way to do this? it's my first react redux project so I don't really know the best practices.
I've tried with routers but it only works when you go to that url directly. It doesn't update the url when state changes happen.
Would a subscribe on the filter state and window.location be the solution? I thought that with connect from react-redux subscribes were no longer necessary.
You should try react-router react-router.by reacttraining. It solve almost every problem regarding routing.
I'm working a React Native app using ExNavigator and I want to use Redux. I want a basic login flow, by which I mean:
User clicks "Log in" with correct info
Redux does a usual async flow through redux-thunk or something
When the user is logged in/request was successful, move to Profile route
I've done Redux login in the web, but I am sort of confused as to how to move ExNavigator to the Profile route when the login works because the Navigator object seems to be contained completely in the components and not Redux.
Any pointers?
A pattern I use often is detecting state changes in my component's componentWillReceiveProps, and triggering the navigation transition from there.
Let's say your state contains a property isLoggedIn, which you set to true when the login is successful. The property is also passed as a prop to your component. You can then:
componenWillReceiveProps({isLoggedIn}) {
if (isLoggedIn && !this.props.isLoggedIn) {
this.props.navigator.push(nextRoute());
}
}
This might not be the most elegant way of solving the problem, but it works. The React Native Navigator, and consequently ExNavigator built on top of it, does not lend it self easily to the Redux architecture.
React Native team is working on a new navigation API, currently known as NavigationExperimental, which ships with latest versions of RN. It works nicely with Redux (example), but as its name indicate, it's still very much experimental.