I'm new to react-native and redux and I'm creating an app that consists of a survey page and a main page that would display other users depending on how they answered the survey. I use firebase to take care of user authentication and to save the results of the survey and redux to handle the state. I started with hardcoding each question and input field then each question has its own action and reducer to update the state on each change from the user (such as typing a letter for the first/last name field).
The survey component has grown to a point where I was considering using firebase to store all the questions and answers and having the component fetch the data then generate the survey. However, since I'm using redux I'm not sure what the process is for dynamically creating actions and reducer or if that would even be a good option. My thought process for using redux was that all my pages could grab the data from the global state since they aren't connected through a parent/child relationship and I use react-native-router-flux to navigate between pages.
TL:DR: I want to store questions and answers to a survey in firebase and have my component fetch the data and create the questions but I'm not sure what the best practice is for saving the state if I want to use redux since I want other pages to have access to this data.
Related
I'm very new to React + Electron. I'm wondering where most people store basic, component-specific state.
Scenario: I have created a custom component. Basically a type of table. The relevant bit of this table to the question is that I allow users to show/hide columns, or even modify the column order.
I'd like these 'column settings' to persist even if the user closes and reopens the application.
No other part of the application is interested in the column settings. They simply affect what is shown in the custom table component.
The underlying data model is not affected by these settings.
I've looked around at a bunch of solutions. Most will probably work, but not sure which is appropriate.
Redux: I could store these bits of component state there. However, the Redux docs give the impression that it is more targeted towards storing global app state. No other component in my application cares which columns the user chose to hide in this table. Thus, it would seem like a gratuitous use of Redux, when this probably should be something handled locally in the component irrespective of whether Redux is present or not.
Localstorage: This would probably work. Main concern is if the user decides to run multiple instances of the app. There could be a vanishingly rare race condition if both instances decide to save the column state at the same time. I don't consider restricting app instancing a proportionate solution just for something as trivial as these columns settings.
electron-store: Says it does atomic writes. But what if I want to use this component one day outside of electron (say in a web app nb: this is very low priority consideration - i'm very unlikely to use it outside of electron)? Should I tie the component to electron just for this? Also, is using ipc (since e-s lives in the main proc) to save trivial settings like this overkill?
What do people do for this?
I am not sure whether I understood redux and react native. I am currently writing an app required to fetch data from server. I have one login reducer, two different function to fetch a set of different data from server and loading to two different list.
A login component will have one reducer which have different states whereas other list will have their own reducer which handle their states that do begin, loading, end etc quite similar between the two.
Is it the way it work. or can I have the same reducer that serves two components e.g the lists mentioned above.
Redux has a "Single source of truth", in other words, it has a single store. No matter how many reducers you make, they are ultimately combined together using combineReducers method provided by redux, and all reducers are executed against every action in your app.
It is just up to you to capture that action (using switch case over action type) in whichever reducer you like and update your redux store accordingly.
Subsequently, since there is a state change, your components re-render and that's when you get the data from the store and update your component.
I hope I made it clear.
As I understand, the best sample of vuex state usage is a shopping cart that can be used by different components or vuex can store auth settings.
But what if I have SPA based on vue-router pages? Should I store page data in vuex state or component.data is good enough for that?
For example, I have SPA with following pages:
/users/
/user/:id
/user/edit/:id
For /user/:id I have the following component structure:
<UserDetailsPage>
<Address :address="user.billingAddress"/>
<UserGroupsList :user-groups="user.groups" />
</UserDetailsPage>
UserDetailsPage retrieves data from API and stores user data object in data().
Components like Address and UserDetailsPage receive all data they need from props and just displays data.
Is it a good idea to store user in the page component?
From my understanding, Vuex state management comes into play when you need to communicate or pass data between sibling components, or if a data change in one component (such as a boolean change) triggers a change in another.
For example, Vuex would be helpful if you wanted to store contact or product info from a user, and have it render on a separate component(s) during a checkout process. But if you are just rendering data for a standalone component, then using component data (either binded with simple directives or fetched from an API) is fine.
Usually it becomes apparent when you truly need to use state.
If you need to render same data to multiple components then you should use Vuex store. Vuex store increases code complexity at initial setup level, but afterwords it is so simple and effortless to use API data in to the multiple components. It doesn't mean that use Vuex store in each application. If you are developing application that is progressive in nature and it will get more complex in future then start using Vuex store.
I ve started to work on reactnative - redux project. I am totally new on this functional paradigm. My question is simple: I have different login/signup options and one of them is facebook.
Inside my action file, i get token from facebook. I should send it to the server for checking. This request can return multiple results
This user is new, open new user page
This user already exist and approved, open application page
This user already exists but hasnt approved sms verification yet, open sms verification screen.
and the question is; where should i put those logic? Should i done it all on actions or just send events to reducer and let it decide. I am confused about that.
Thanks
Per the Redux FAQ entry on "where should my business logic live?":
There's no single clear answer to exactly what pieces of logic should go in a reducer or an action creator. Some developers prefer to have “fat” action creators, with “thin” reducers that simply take the data in an action and blindly merge it into the corresponding state. Others try to emphasize keeping actions as small as possible, and minimize the usage of getState() in an action creator. (For purposes of this question, other async approaches such as sagas and observables fall in the "action creator" category.)
This comment sums up the dichotomy nicely:
Now, the problem is what to put in the action creator and what in the reducer, the choice between fat and thin action objects. If you put all the logic in the action creator, you end up with fat action objects that basically declare the updates to the state. Reducers become pure, dumb, add-this, remove that, update these functions. They will be easy to compose. But not much of your business logic will be there. If you put more logic in the reducer, you end up with nice, thin action objects, most of your data logic in one place, but your reducers are harder to compose since you might need info from other branches. You end up with large reducers or reducers that take additional arguments from higher up in the state.
I also discussed the idea of "thick" and "thin" reducers in my blog post The Tao of Redux, Part 2 - Practice and Philosophy.
Let's say I have this blog app. There are posts, pages, menu, and user login.
One way to load the entire application state is to have one api call which will include posts, total number of pages for pagination, menu items and current user state.
The second way would be to have multiple API called, one for each component. So one call for posts and pages, one for menu and one for current user.
Which would be best strategy given the fact react is built around components?
I'll add my 2 cents as answer but still wanting to close as primarily opinion based.
The way I structure my React apps is to have a top level components called Screens or URLs, ie., /list-users should map against the ListUsersScreen component.
In said screen I declare a static method called fetchData, this method returns an object which values are Promises.
{
users: fetchUsersAction(),
someOtherApiData: fetchSomeOtherAPIData()
}
This lends well to both pure client apps and universal apps, as well.
On your server side you'd have to wait until all Promises resolves until you can render something.
Furthermore you can easily cache the values in your application state object and decide if you want to fetch new data or render stale data, also it saves on bandwidth for your user since the user might or might not decide to continue browsing your site.