The joy of React+Redux with Elixir/OTP

The joy of React+Redux with Elixir/OTP  #ReactJS #Redux #Elixir

  • Graphically, this is the schema of a Redux app: – – Basically, Redux does the following: – – An OTP GenServer does the following: – – In short, we can use the same mental model for the client and server side.
  • We can dispatch events to Elixir, compute a new version state server side, propagate this state to redux, and our views will get updated automatically.
  • We have just implemented the thick red arrows: – – We will update the store with the state that comes from the server in two different situations.
  • With this, we have connected the server state with Redux state.
  • But, if you want to have state shared between different users, or we want to have pieces of the state in the server for other reasons, such as enforcing validation rules, we can use the same mental mode with Elixir GenServers.

Digital solutions partner. High quality work with Symfony, React and Elixir.
Continue reading “The joy of React+Redux with Elixir/OTP”

React.js: The Hard Parts

State Management without #Redux:  by #ReactJS

  • If a user interacts with your application or refreshes the page, then we’ll look up state at that moment and rebuild the page.
  • In dynamic apps, like ones built using React, state change has to be dealt with immediately.
  • Managing state can get complicated if each component has some state.
  • Interaction with the components, like a mouse click, trigger these functions to update state.
  • For example to implement retweets: – – When the state is updated, the props will change too and render the child components again.

I am a full-stack software developer and passionate educator. I have been building for the web for almost two decades.
Continue reading “React.js: The Hard Parts”

8 things to learn in React before using Redux

8 things to learn in #ReactJS before using #Redux:

  • A component can manage a whole lot of state, pass it down as props to its child components and pass a couple of functions along the way to enable child components to alter the state in the parent component again.
  • Component A is the only component that manages local state but passes it down to its child components as props.
  • In addition, it passes down the necessary functions to enable B and C to alter its own state in A.

    Now, half of the local state of component A is consumed as props by component C but not by component B.

  • When you lift the local state management down to component C, all the necessary props don’t need to traverse down the whole component tree.
  • When a library such as Redux “connects” its state managements layer with React’s view layer, you will often run into a higher order component that takes care of it (connect HOC in react-redux).

Facts about React that should be known before using Redux (or MobX). Most important: Learn React first, then opt-in Redux…
Continue reading “8 things to learn in React before using Redux”

Controlled Forms in React – Byte-sized React – Medium

Controlled Forms in React  #tech #webdevelopment #programming #javascript #react #reactjs

  • Defining a form’s input value via state is considered a controlled component.For controlled inputs you will need a corresponding state and then a class method to update that state with changes.Let’s walk through a quick example with CodePen.
  • If you don’t know how to set up CodePen with React, you can check out this story.Let’s also add Boostrap 4 to our CodePen so our forms aren’t so plain.Add this to your JS file:class App extends React.Component { constructor(props) { super(props); } render() { return ( div className=”form-group container” labelControlled Form Input/label input type=”text” className=”form-control” aria-describedby=”emailHelp” placeholder=”Update input here” / large className=”form-text text-muted” Form Output /large /div ); }}ReactDOM.render( App /, your CodePen should look like this:Right now our form input is not controlled- meaning that the value of the form input is not determined by the state.
  • Let’s add a state value for the form making it a controlled form.Declare the state value in your constructor.constructor(props) { super(props); this.state({input: ”}); }Then let’s pass the state input value down to the value of the email form and as the value of our output text.input type=”text” className=”form-control” aria-describedby=”emailHelp” placeholder=”Update input here” value={this.state.input}/ large className=”form-text text-muted” {this.state.input} /largeNow notice how the value of the form reflects the state, but the form value doesn’t update.
  • Let’s add a method to update state, and pass it down using the onChange event handler.Add the method to your constructor.constructor(props) { super(props); this.state = ({input: ”}); this.formUpdate = define the formUpdate method.formUpdate(event) { this.setState({input: event.target.value});}The formUpdate function needs to be called whenever a change is made to the form input.
  • Use the onChange react event to trigger the formUpdate method.input type=”text” className=”form-control” aria-describedby=”emailHelp” placeholder=”Update input here” value={this.state.input} time a change happens to the form the formUpdate method will be called with the event object.

Form input values can be set to state values and then updated via React events. Defining a form’s input value via state is considered a controlled component. For controlled inputs you will need a…
Continue reading “Controlled Forms in React – Byte-sized React – Medium”

Beginner’s guide to react/redux —painting a mental model

  • I highly recommend anyone starting out with Redux to read the core concepts outlined in the official documentation.Long story short, Redux application has a plain object, known as store, which serves as data model for your app.
  • For example, for a list of articles, I can have an article state that looks like this:state = { articles: [{ “id”: 314, “title”: “6 innovative apps utilizing the ethereum network”, “source”: “Investopedia‎”, “link”: “date”: “1500523200”, “type”: “msm” }, { “id”: 893, “title”: “what is plasma and how will it strengthen…”, “source”: “Investopedia‎”, “link”: “date”: “1502856000”, “type”: “msm” },.
  • In our article example, fetching articles is an action that looks that this:{ type: ‘ARTICLES_FETCHED’, payload: [{ “id”: 314, “title”: “6 innovative apps utilizing the ethereum network”, “source”: “Investopedia‎”, “link”: “date”: “1500523200”, “type”: “msm” }, { “id”: 893, “title”: “what is plasma and how will it strengthen…”, “source”: “Investopedia‎”, “link”: “date”: “1502856000”, “type”: “msm” },.
  • In our article example, the reducer looks like this:const initialState = { articlesById: null,}export default function(state = initialState, action) { switch (action.type) { case types.ARTICLES_FETCHED: return { …state, articlesById: action.articlesById } default: return initialState }}To summarize the basic ideas of Redux:it describes state as plain objects, and store (global state) by merging all the states in your app.it describes changes to the app as plain objects.it uses pure functions to handle changes.The redux API then bridges your redux logics with react views while providing some utilities to compose states.Say we send a request to a remote server and fetch some articles.
  • The reducer evaluates the action and store the payload articles in the state.

Disclaimer: This article is written by a beginner trying to comb through new concepts she just learned. React/Redux is the hottest frontend frameworks these day. If you google the term Redux diagram…
Continue reading “Beginner’s guide to react/redux —painting a mental model”

Jest: Test suite with superpowers 😎

  • No need to write test cases for each component returned by render method.
  • The test case will look somthing like this:

    Whenever Jest sees this line , it is going to generate a snapshot and compare it with stored snapshot.

  • Snaps should be there in each dev’s machine so that if one of the devs changes some other component unknowingly, the snap test for that component will fail and he/she would know before pushing it.
  • You can also have a look at the example test case in our boilerplate code here.
  • We will write test case for the methods including snapshot test.

Jest: Test suite with superpowers 😎
Continue reading “Jest: Test suite with superpowers 😎”