redux-dsm is an easier way to handle async state. v3.0.0 has simplified state graphs. Yay! #reactjs #redux

  • Since I switched to Redux, I handle all of my view state transitions by dispatching action objects, and that requires writing a bunch of boilerplate, such as action types (e.g., ), and action creators (which your view or service layers can call to create actions without forcing you to import…
  • is an object with camelCased keys and strings corresponding to your state transitions.
  • For the above example, it returns: – – will be an object with camelCased keys and function values corresponding to your state transitions.
  • For each transition, an action creator is created which will automatically fill in the correct action type, and pass through to the state.
  • The example fetch state machine will produce the following : – – is a normal Redux reducer function that takes the current state and an action object, and returns the new state.

redux-dsm – Declarative state machines for Redux: Reduce your async-state boilerplate.
Continue reading “redux-dsm is an easier way to handle async state. v3.0.0 has simplified state graphs. Yay! #reactjs #redux”

Offline First React Native

Checkout our latest #blog post: Offline First React Native -  #ReactNative #Mobile

  • In the talk, I explained the concerns and tools related to developing React Native apps that work despite a poor connection.
  • When you want to persist data with React Native, you have 3 storage options:

    You can chose the option that best suits your unique criteria.

  • You can use React Native’s AsyncStorage to set/get items or can use Redux Persist as a performant, and easy to implement way to persist data.
  • When we are talking about data in an Offline-First mobile app, the size matters.
  • Photos are bigger in size and when you are dealing with poor connection the large data is going to be problematic.

About two weeks ago I presented a talk about the offline first React Native in the React Native Vancouver Meetup. Here is a short summary of the talk and the slides for everyone to use.
Continue reading “Offline First React Native”

Auth0 with Firebase in React-Native – Fineighbor Blog

Auth0 with Firebase in React-Native  #auth0 #reactnative #javascript #reactjs #reactjs

  • Auth0 with Firebase in React-NativeAuthentication or SMS experience token 開始建構,接著安全性的考量,則要產生一次性token, 設定token 有效期限,如果有重複登入要可以revoke token…etc. 考慮到資源的分配,我們開始survey 提供authentication API, auth 的 token流程:Config client addons in auth0 dashboardget auth0 tokenuse id_token or refresh_token to get firebase token via delegation api endpointuse the token to sign in firebase !
  • API endpoint: delegation function provided in react-native-auth0 currently have some bugs which missed the “https” in his base_url string, plus the error log in his implementation will cause exception “response undefined” due to the above reason.
  • (or submit a PR)Config addons in auth0 dashboard: Go to Google api console and choose the corresponding firebase application, create an service account key.Download the JSON file, will be used later in auth0 configGo to Auth0 Client dashboardCopy the private key including BEGIN PRIVATE KEY and END PRIVATE KEYBe sure to copy the private key including BEGIN PRIVATE KEY and END PRIVATE KEY2.
  • Finally, Get firebase token via delegation api and sign in !
  • // in function delegationlet payload = Object.assign({ ‘api_type’: ‘firebase’, ‘client_id’: credentials.clientId, //clientId ‘id_token’: token.idToken, ‘grant_type’: });let params = { method: ‘POST’, headers: { ‘Accept’: ‘application/json’, ‘Content-Type’: ‘application/json’, }, body: JSON.stringify(payload) }let res = await params); let res_json = await res.json() console.log(res_json); = { console.log(‘Failed to sign in Firebase: ‘ + error); });console.log(‘SUCCESS !’)

Authentication 是最基本但是最難以處理的細節,認證不再只有單一的管道,近年的服務幾乎都有passwordless(透過email or SMS 登入),沒有人喜歡多記一組帳號密碼,密碼不論在安全性上和體驗上都不是最佳的選擇。實際上我們也直接收到來自使用者的回饋建議剔除密碼的機制。當然user experience 永遠是重要的,但是在開發初期沒有規劃的情況下,在工程端就必須要做很…
Continue reading “Auth0 with Firebase in React-Native – Fineighbor Blog”

Buid simple React Apps Using Event Emitters – Mokanarangan Thayaparan – Medium

Build simple #ReactJS apps using event emitters

  • Buid simple React Apps Using Event EmittersBuild simple React Apps using Event EmittersI admit the debate for Redux Vs Flux has been settled and there is no point a system so trivial as Eventemitter.
  • I have decided to take a Todo application as example.The usual way of implementing a ToDoThen I added my only clientclass BaseClient {/** * Initiate the event emitter */ constructor() { this.eventEmitter = new EventEmitter(); }/** * Adds the @listener function to the end of the listeners array * for the event named @eventName * Will ensure that only one time the listener added for the event * * @param {string} eventName * @param {function} listener */ on(eventName, listener) { listener); }/** * Will temove the specified @listener from @eventname list * * @param {string} eventName * @param {function} listener */ removeEventListener(eventName, listener) { listener); }/** * Will emit the event on the evetn name with the @payload * and if its an error set the @error value * * @param {string} event * @param {object} payload * @param {boolean} error */ emit(event, payload, error = false) { this.eventEmitter.emit(event, payload, error); }/** * Returns the event emitter * Used for testing purpose and avoid using this during development */ getEventEmitter() { return this.eventEmitter; }}The comments hopefully.
  • Now we can separate the two components and connect it with only events.Add listener at component mount and remove them at unmout// Listen for event componentWillMount() { client.on(‘TODO_ADDED’, this.addEvent); } //Remove listener componentWillUnmount(){ this.addEvent); }Now you don’t need to pass the addEvent function as a prop.Voila.
  • But simple modular ones, easy to maintain.This way we can have multiple modular components that doesn’t need to know about other components.
  • This is not rocket science but this might help you build simple apps without much hassle.

I admit the debate for Redux Vs Flux has been settled and there is no point a system so trivial as Eventemitter. But having worked with React and Redux for more than a year I found out two things. In…
Continue reading “Buid simple React Apps Using Event Emitters – Mokanarangan Thayaparan – Medium”

React to async/await – Alexander Lee – Medium

React to async/await #reactjs #es7

  • For the examples below, I will show I would normally approach each problem using Promises followed by the async await method.ActionsIn this example, this is how I would typically approach creating a new user via promises.Promise approachexport default function createUser(params) { const request = axios.post(‘http://www…, params); return (dispatch) = request function onSuccess(success) { dispatch({ type: CREATE_USER, payload: success }); return success; } function onError(error) { dispatch({ type: ERROR_GENERATED, error }); return error; } .
  • async/await approachexport default function createUser(params) { return async dispatch = { function onSuccess(success) { dispatch({ type: CREATE_USER, payload: success }); return success; } function onError(error) { dispatch({ type: ERROR_GENERATED, error }); return error; } try { const success = await axios.post(‘http://www…, params); return onSuccess(success); } catch (error) { return onError(error); } }}I added the async prior to the dispatch andawait in front of axios.post .
  • Promise approachimport React, { Component } from ‘react’;export default class userForm extends Component { constructor(props) { super(props); this.onSubmit = this.onSubmit.bind(this); } onSubmit(e) { e.preventDefault(); let formInput = this.refs.createUser; .
  • etc }, (error) = { // Do something with the error }); } render() { return ( form onSubmit={this.onSubmit} input placeholder=”current user” ref=”createUser” / buttonSubmit/button /form ); }}After a form is submitted via click and this.props.createUser,we are returned a promise.
  • Lets see how we can do it using the async/await method.async/await approachimport React, { Component } from ‘react’;export default class userForm extends Component { constructor(props) { super(props); this.onSubmit = this.onSubmit.bind(this); } async onSubmit(e) { e.preventDefault(); let formInput = this.refs.createUser; try { const response = await // do something with response } catch(error) { // do something with error } } render() { return ( form onSubmit={this.onSubmit} input placeholder=”current user” ref=”createUser” / buttonSubmit/button /form ); }}Like our action functions, the async/await approach in our components allows our asynchronous code to look synchronous.

I got curious this past weekend about javascript’s ES7 async/await. After reading a couple of blog posts I got the basic idea of how it works and why it’s gotten so much chatter. Long story short, it…
Continue reading “React to async/await – Alexander Lee – Medium”