← Back to Lessons
Edit on Github

Learn What is React Flux

Remember how we always say that programming is like Taco Bell? It’s always the same ingredients, except just used in a different way! In this particular case, we are going to be relying heavily on Events to create our entire application architecture.

Why do we need Flux?

We know you are still in the process of learning React. States and props can be confusing, and now, with Flux, things are going to get a little bit harder. But it’s for a good cause!

Without Flux, you can’t create medium or big React applications because everything will become disorganized pretty quickly.

Also, two different views are not able to send data between each other like the components do (using props) because all views are siblings and React Router is instantiating them. We need to have a common store shared between all the views that we are going to call "The Store."

Here is a list of all the advantages of using it:

  • It centralizes and detaches the application data from the components: database communication and data-processing will not depend anymore on how the application looks (renders).
  • It controls the way your application data will flow: it does not matter if the data was inputted by the user or coming from a DB; everything will be available in a clear and accessible way.
  • It differentiates your components in Views vs Re-usable components: your components will remain being abstracted from your application logic – making them 100% reusable for future applications.

React Flux

Flux Divides the Application in 3 Layers:

  
Views (Components)Every React Component that calls any Flux action is called a view. The reason to call those components in a different way is because React components are supposed to communicate with each other through their props (without Flux).

Once a React Component is hard-coded to Flux, you will not be able you reuse that component in the future (on this or any other development).
ActionsActions can by triggered components (when the user clicks or interacts with the application) or by the system (for example, the auto-save functionality). Actions are the first step of any Flux workflow and they always need to dispatch to the store.
StoresThe store contains all the application data. It handles everything incoming from the dispatcher and determines the way data should be stored and retrieved.

Building our first User History with Flux

The following project is a To-Do List application with 2 main user stories:

  • Create task (already developed and working).
  • Delete Task.

To code the delete functionality, we have to update 4 mains files: (1) The Component (for when the user clicks on the track), (2) The Actions, (3) The Store (two times), and, (4) The Component one last time. Its only 3 files and 5 updates. And you have to do that for every user story that you are going to build into your application.

In the end, working with Flux has to become something as automatic as riding a bike.

react flux

Lets Implement the Delete Task Functionality

1) What user action starts the functionality?

(It’s always a typical JS event like: click, hover, resize, etc.)

Everything starts whenever the user must click on the trash can icon. That is why we need to start our application by listening to the typical onClick event on the delete button.

/ In the component that renders each todo item we need to add a button and also an onClick listener that calls // the respective TodoAction.deleteTodo(task) function that we will create on the actions: <button onClick={()=>MyActions.deleteTodo(taskToDelete)}>delete</button>

2) Then we need to code our action inside the MyActions.js file like this:

MyActions.js // In this case, we decided that this function (a.k.a action) will receive the ID of the task to be deleted. class MyActions extends Flux.Actions{ deleteTask(taskToDelete){ //get the current list of actions form the store let currentActions = MyStore.getActions(); let updatedActions = currentActions.filter((task) => { return (task.id != taskToDelete.id); }); this.dispatch('MyStore.setActions', updatedActions); } }

☝ This is a class component. We strongly recommend you to use functional components and hooks instead because class components are legacy.

3) Update the store to handle that new dispatched action

// Inside the todoStore we have a HandleActions method that contains the logic to handle each dispatched action. // We have to add a new case to the switch with the name 'DELETE_TODO' // it has to mach the name of the action that was dispatched. handleActions(action) { switch (action.type) { ... case 'DELETE_TODO': { this.deleteTodo(action.id); break; } } }

4) Inside the To-Do Store, implement the actual logic for deleting the task and emitting the changes

// Anywhere on your TodoStore class, add a new method that finally deletes the task from the todo list. // in this case we are using the filter function because it returns the same array but only with // the elements that match the logical question inside the filter (task.id != id) class TodoStore extends EventEmitter { ... deleteTodo(id){ this.todos = this.todos.filter((task)=>{ //filter all tasks that have the given id return (task.id != id); }); this.emit('change'); } ... }

☝ This is a class component. We strongly recommend you to use functional components and hooks instead because class components are legacy.

The Result

Finally, we have a new functionality implemented into our project. To keep adding more functionalities, you just have to start the Flux coding workflow from step 1 all over again.

Click here to open demo in a new window

Subscribe for more!


COMPANY

ABOUT

CONTACT

MEDIA KIT

SOCIAL & LIVE LEARNING

The most efficient way to learn: Join a cohort with classmates like yourself, live streamings, coding jam sessions, live mentorships with real experts and keep the motivation.

INTRO TO CODING

From zero to getting paid as a developer, learn the skills of the present and future. Boost your professional career and get hired by a tech company.

DATA SCIENCE

Start a career in data science and analytics. A hands-on approach with interactive exercises, chat support, and access to mentorships.

30DAYSOFGEEKCODING

Keep your motivation with this 30 day challenge. Join hundreds of other developers coding a little every day.

A.I. & MACHINE LEARNING

Start with Python and Data Science, Machine Learning, Deep Learning and maintaining a production environment in A.I.


©4Geeks Academy LLC 2019

Privacy policies


Cookies policies


Terms & Conditions