I am developing a front end mobile application with react-native and redux implementation. I had successfully pulled all the necessary real APIs. Now I want to create a function that can update the student's info. Fyi, I'm developing a student information system, so there's info like address and email that need to be updated if changes occur. I don't know how to do it, I heard people uses "lodash" which I dunno what it is for. And how do I save the updated changes?
To update state of redux, it is good idea to use helper like react-addons-update or immutability-helper. update() provides simple syntactic pattern to make writing state update code easier. Eg:
import update from 'immutability-helper';
function handleUpdateMydata(state, action){
return update(state,{
myData:{
$set:action.payload
}
})
}
To ensure your state is permanent store, you may use redux-persist
lodash is a library that is used for dealing with the arrays and objects. if you wanna know more about its content see the documentation here
Documentation
Now coming on to your real problem,since you are using redux I think you should create an action that would update your student details in the database
Related
In React there is a really handy hook called useId that helps ensure HTML IDs are unique across the DOM. I'm wondering if there's anything similar in the Vue ecosystem?
https://beta.reactjs.org/apis/react/useId
Vue doesn't have a public counterpart, and it can be seen that it has been just recently become available in React.
It can be done in Vue by using internal API that is frequently used in existing third-party libraries and unlikely to break:
const uid = getCurrentInstance().uid;
Or by using any unique id generator with global state like Lodash:
const uid = _.uniqueId();
Is it possible listening to db changes in Dynamo db from React Native?
The goal is to update automatically a value in React Native when something changes in the DB.
Amplify supports it, but it is only possible if the origin of the change is done through the grapql api (from another user of your react native app), and not if the change in the db is is originated from somewere else (for example a lambda function). This is because in aws amplify it is aws AppSync that is pushing the change message.
If the origin of the change is from somewere else, you need to manually configure a lambda function and attach it as a trigger to dynamodb (this might be possible through the amplify cli, but I have never done it that way so I am not sure) and make the lambda function for example send a websocket/mqtt message to your app. But that is a lot of manually coding and configuring.
If the origin is from a user of your app, through the graphql api, amplify provides you with an out of the box subscription possibility. I use angular, and when use amplify I get a file called API.service.ts (not sure if it is the same for react native). In that file there would be an observable called for example OnCreateTodoListener.
You can use that that observable to subscribe to create events. Or similar for OnUpdateTodoListener etc.
The graphql query looks something like this (typescript version for angular):
OnUpdateTodoListener: Observable<
SubscriptionResponse<OnUpdateTodoSubscription>
> = API.graphql({
query:
`subscription OnUpdateTodo {
onUpdateTodo {
__typename
id
}
}`
}
) as Observable<SubscriptionResponse<OnUpdateTodoSubscription>>;
These listerers should already be availiable for you, unless you have manually configured your graphql schema model to not allow subscriptions.
Take a look at the docs for mor detailed information
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 months ago.
Improve this question
I have a doubt about this topic, i would need to initilize the vuex store at the very beginning.
In details, I would need to retrive some data from Local Storage to the Vuex store because these data will decide which landing page the user will land on.
My questions are:
Where is the best place (best practice) to do this in a vue project?
Is there a vantage doing this (copy data from local storage to vuex store) ? is not the same if i read directly the local storage data without use vuex, with localStorage.getItem('key')?
Thank you
1- Where is the best place (best practice) to do this in a vue project?
If you want to set the data of the local storage to your vuex store by generate ( whatever the page you are in ), it would be better to create a plugin to do that.
If storage will depend on the page or component you are in, you can use beforeCreated lifecycle.
2- Is there a vantage doing this (copy data from local storage to vuex store) ? is not the same if i read directly the local storage data without use vuex, with localStorage.getItem('key')?
As #RobinRider mentioned on Quora
Well, Vuex and LocalStorage do different things and are not mutually exclusive. Vuex is typically used to maintain the state while the application is in use. LocalStorage is often used for persisting state between application runs. Example: refreshing the browser window will wipe the Vuex state, but everything in LocalStorage remains unchanged. Having said that, Vuex is much more advanced when it comes to handling state data. LocalStorage is essentially just a list of JSON-encoded data. You can retrieve that data, and set it. Nothing more. Below are a couple benefits of using Vuex.
Code Duplication
By using a state management library, such as Vuex, you can avoid duplicating code if you need to access state data in multiple parts of your application. You only need to create methods for reading and parsing state data once in a Vuex store. Every time you want to load something from LocalStorage, you will need to also make sure to decode the result per your needs. Depending on your application, that may or may not be simple.
Getters You are able to provide custom functions used to provide derived versions of the application state. The results of these functions are cached, only being updated when the data they depend on is updated. This provides uniform results across your application. Getters | Vuex
Actions
You can provide functions to perform certain tasks, and then update the state after these tasks are completed. One of the biggest benefits of actions is that they are asyncronous, making it easy to use AJAX to query a server, and then commit that data to the application state.
I think the simplest approach is to do it right when creating Vuex
export default new Vuex.Store({
state: {
foo: localStorage.getItem('foo')
}
})
You also may like this plugin which saves your Vuex state between sessions in localStorage/cookies
The second question is more of opinion based. I personally don't see any benefits in saving simple readonly data from localStorage in Vuex.
I have a ReactNative app that is working with some constants,
export const BEARER_TOKEN = 'eyJhbGciOiJIU***'
The app works fine until I need to update the token so with a new version distributed by appcenter,
If I just update the app, it keeps the old token
but
If I delete and install a new version, the new token is used
So, how can I make sure that the new token gets loaded? like if the app starts reload constants?
Thanks.
I suggest using Asyncstorage and Redux state in order to maintain your Bearer_Token.
For instance, assume using the Facebook app.
You are logging in for the very first time. Capture and store your Bearer_token in Asyncstorage and also maintain in the redux state.
Next time when you kill the app and open again. Load the Bearer_Token from Asyncstorage.
Your Bearer_Token will be set dynamically.
You can't, with this approach. This is the nature of javascript, it loads everything initially and even if you change it by putting the variable in object. It is a bad practice.
The better approach is to use redux or context api,
I see you want to use BEARER_TOKEN, for user authentication probably.
So you can have a state, authUser inside your redux and it will keep track of the token in your entire app. This approach is very useful when you want the user to logout if any change in authToken.
https://redux.js.org/
For a simple version, you can use context api from react.
now the third option, If you really really really want to not use these approaches.
You can just usewindow.token = 'sdfasdf';
then whenever you want to change it, just use window.token = 'soemthing else'from other files.
My app is similar to facebook.
I want to retain the userID/Username upon login screen, so that i could use it at rest of the application for queries online data.
I tried storing it in a javascript object after successful login, but it gets washed away when i move to other screens.
Thanks
You can use the App.Properties API.
Example, right from the docs.
Titanium.App.Properties.setString("my_prop","cool");
if(Ti.Facebook.loggedIn) {
if(Ti.App.Properties.hasProperty('fbid')) {
var fbid = Ti.App.Properties.getString('fbid');
}
}
You can use the hasProperty to verify they have logged in in the past and when they do logout you can use the removeProperty so that your app assumes they haven't logged in and starts over.
If you are going to store the information in the properties, you should be aware that the is information persisted on the device.
The use of properties for short term storage IMHO should be avoided if possible.
You have two choices, one store your variables in the Titanium namespace
Titanium.App.credentials = { "user" :"username", "pwd":"password123"};
Or create your own namespace and store your variable there. This will ensure you values are available throughout the application, but not stored on the device.
There is an example on my blog here http://blog.clearlyinnovative.com/post/6519148138/titanium-appcelerator-quickie-global-variables-scopes