Palestra apresentada no 1º Femug Joinville.
Códigos de exemplo usados na talk:
https://github.com/fdaciuk/talks/tree/master/2016/01-femug-jlle
Versão com Gifs:
https://docs.google.com/presentation/d/10AZ_sJZZmw3BeaZ54lyzfYLp51YiCHA4_o7X8XSNDV4/present
Building React Applications with Redux
with Yuri Takhteyev
OVERVIEW
Since React is just a “view framework”, it leaves you with lots of options for how to architect the deeper parts of your stack. The best way to handle those deeper layers is by using Redux – a state container that allows you to write much of your application in the form of pure functions. Using Redux helps you write applications that are much easier to test and understand and to achieve more thorough separation between your views and your business logic. Redux also unlocks the possibility of using amazing tools.
OBJECTIVE
Introduce the audience to Redux, a state container that can be used together with React to achieve sanity deeper down in your stack.
TARGET AUDIENCE
Developers familiar with core React and looking for a better way to architect their applications.
ASSUMED AUDIENCE KNOWLEDGE
Core React knowledge is assumed. Familiarity with basic Flux concepts would help, but I’ll review those quickly.
FIVE THINGS AUDIENCE MEMBERS WILL LEARN
Why pure functions make your code easier to maintain.
How unidirectional data flows help you sleep better at night.
How Redux helps you manage state better via reducers.
How to use Redux together with React.
How to test Redux applications.
React is a fantastic Javascript rendering framework with a steep learning curve. One of the reasons is understanding state. We explore unidirectional flow, props, state Immutability and Redux.
Let's Redux! by Joseph Chiang
Published April 15, 2016 in Technology
For people who use React but haven’t tried Redux.
- Why - Common issues while people use React
- Redux Basic Concept
Palestra apresentada no 1º Femug Joinville.
Códigos de exemplo usados na talk:
https://github.com/fdaciuk/talks/tree/master/2016/01-femug-jlle
Versão com Gifs:
https://docs.google.com/presentation/d/10AZ_sJZZmw3BeaZ54lyzfYLp51YiCHA4_o7X8XSNDV4/present
Building React Applications with Redux
with Yuri Takhteyev
OVERVIEW
Since React is just a “view framework”, it leaves you with lots of options for how to architect the deeper parts of your stack. The best way to handle those deeper layers is by using Redux – a state container that allows you to write much of your application in the form of pure functions. Using Redux helps you write applications that are much easier to test and understand and to achieve more thorough separation between your views and your business logic. Redux also unlocks the possibility of using amazing tools.
OBJECTIVE
Introduce the audience to Redux, a state container that can be used together with React to achieve sanity deeper down in your stack.
TARGET AUDIENCE
Developers familiar with core React and looking for a better way to architect their applications.
ASSUMED AUDIENCE KNOWLEDGE
Core React knowledge is assumed. Familiarity with basic Flux concepts would help, but I’ll review those quickly.
FIVE THINGS AUDIENCE MEMBERS WILL LEARN
Why pure functions make your code easier to maintain.
How unidirectional data flows help you sleep better at night.
How Redux helps you manage state better via reducers.
How to use Redux together with React.
How to test Redux applications.
React is a fantastic Javascript rendering framework with a steep learning curve. One of the reasons is understanding state. We explore unidirectional flow, props, state Immutability and Redux.
Let's Redux! by Joseph Chiang
Published April 15, 2016 in Technology
For people who use React but haven’t tried Redux.
- Why - Common issues while people use React
- Redux Basic Concept
When developing applications we have a hard time managing application state, and that is okay because managing application state is hard. We will try to make it easier using Redux.
Redux is predictable state management container for JavaScript applications that helps us manage our state while also making our state mutations predictable.
Through the presentation and code, I will show you how I solved my state problem with Redux in React application.
- What is redux ?
- Redux Principles
- Data Flow in Redux
- Understanding Action, Reducers, Store
- Data flow in React-Redux App
- Demo
Redux Utilities
Explanation of the fundamentals of Redux with additional tips and good practices. Presented in the Munich React Native Meetup, so the sample code is using React Native. Additional code: https://github.com/nacmartin/ReduxIntro
Redux is the next evolution of Flux and comes with dramatic productivity benefits. These slides cover the basics of Redux along with a practical examples from the criticalcss.com site.
Slides from talk given Jan 2016 at the LondonReact meetup at Facebook: http://www.meetup.com/London-React-User-Group/events/227112505/
Tech talk about scalable architectures with React and Redux.
We take a walk on problems that React proposes to solve and in which situations the Redux is indicated.
We dive deep into patterns of organization and structuring of projects React and Redux focusing on scalability and maintainability.
Basic concepts of React, Flux, Redux and the most important ES2015 (ES6) features.
Presentation on Github pages: http://lingvokot.github.io/React-Redux-ES6-presentation/
My React TechTalk with Jordan open source association on Sep 13-2017 @Zinc , KHBP.
Session source code :
https://github.com/ali-sao/Better-web-apps-with-react-redux-.git
Introduction to React in combination with Redux. Redux helps you to develop applications in a simple way while having features like time-travel available during development.
All Things Open 2014 - Day 2
Thursday, October 23rd, 2014
James Pearce
Head of Open Source with Facebook
Front Dev 1
An Introduction to ReactJS
Find more by James here: https://speakerdeck.com/jamesgpearce
Async Server Rendering in React+Redux at NYTimes (redux-taxi)Jeremy Gayed
Introducing redux-taxi, a small library that allows for component-driven asynchronous server-side rendering in a React+Redux app.
(Presentation as given at ReactJS New York Meetup on 4/14/2016)
When developing applications we have a hard time managing application state, and that is okay because managing application state is hard. We will try to make it easier using Redux.
Redux is predictable state management container for JavaScript applications that helps us manage our state while also making our state mutations predictable.
Through the presentation and code, I will show you how I solved my state problem with Redux in React application.
- What is redux ?
- Redux Principles
- Data Flow in Redux
- Understanding Action, Reducers, Store
- Data flow in React-Redux App
- Demo
Redux Utilities
Explanation of the fundamentals of Redux with additional tips and good practices. Presented in the Munich React Native Meetup, so the sample code is using React Native. Additional code: https://github.com/nacmartin/ReduxIntro
Redux is the next evolution of Flux and comes with dramatic productivity benefits. These slides cover the basics of Redux along with a practical examples from the criticalcss.com site.
Slides from talk given Jan 2016 at the LondonReact meetup at Facebook: http://www.meetup.com/London-React-User-Group/events/227112505/
Tech talk about scalable architectures with React and Redux.
We take a walk on problems that React proposes to solve and in which situations the Redux is indicated.
We dive deep into patterns of organization and structuring of projects React and Redux focusing on scalability and maintainability.
Basic concepts of React, Flux, Redux and the most important ES2015 (ES6) features.
Presentation on Github pages: http://lingvokot.github.io/React-Redux-ES6-presentation/
My React TechTalk with Jordan open source association on Sep 13-2017 @Zinc , KHBP.
Session source code :
https://github.com/ali-sao/Better-web-apps-with-react-redux-.git
Introduction to React in combination with Redux. Redux helps you to develop applications in a simple way while having features like time-travel available during development.
All Things Open 2014 - Day 2
Thursday, October 23rd, 2014
James Pearce
Head of Open Source with Facebook
Front Dev 1
An Introduction to ReactJS
Find more by James here: https://speakerdeck.com/jamesgpearce
Async Server Rendering in React+Redux at NYTimes (redux-taxi)Jeremy Gayed
Introducing redux-taxi, a small library that allows for component-driven asynchronous server-side rendering in a React+Redux app.
(Presentation as given at ReactJS New York Meetup on 4/14/2016)
Today I am going to tell a story
And every story has a begging, a middle, and the end.
This one is not an exclusion.
The story about history of React-Hot-Loader
2017 - budapest.mobile meetup @ Budapest
I have been an android developer for 5 years now. Beginning of this year I stepped out from my comfort-zone, and tried out React-Native.
After releasing 4 different kind of RN projects, I would like to share my experience and give you some tips so you won't feel like you are fighting for your life when using RN on Android or ios. So what is my "survival kit" contains? A lot of info on project structure and setup, libraries, tools for debugging, best-practices, fastlane, push notifications and much more.
Looking at how people, with current deployments, can start using docker with out having to replace anything. Also giving a migration path that allows testing the separate pieces and migrating over slowly without painting yourself into a corner. Also covering why you might want to do this and the problems it may help to solve.
Create ReactJS Component & publish as npm packageAndrii Lundiak
How to prepare your (provider) ReactJS component and let your friends (consumer) to use it.
What issues you may face with Babel, Webpack, Eslint, Node, npm.
When to use “npm link” approach and “npm publish” approach.
What else to read and to try.
I Heard React Was Good
with Ryan Christiani
There is no doubt React is here to stay, it’s popularity is on the rise. But if you are new to JS or new to JS frameworks you might be wondering WHY is it so popular. In this talk we will look at why we have React and what problems it solves. The concepts of reusable components, their life cycles and the common terminology. We will also explore what the workflow for building a modern React app looks like, and where React can fall short. Learning React in 2016 will be an important step in your career, so lets dive in!
OBJECTIVE
Break down the concepts behind React and make it easy for people to start building with it.
TARGET AUDIENCE
JavaScript developers or project mangers looking to get a better understanding of React.
ASSUMED AUDIENCE KNOWLEDGE
Intermediate understanding of JavaScript.
FIVE THINGS AUDIENCE MEMBERS WILL LEARN
Why do we have react, what problems does it solve
React components
Component life cycles
Common terminology
Where React falls short
Apresentado na React Conf Brasil, em São Paulo, 7 de Outubro de 2017 #reactconfbr
Programador Nutella, cheguei na WEB quando HTML era 5, mas React era mato, escrevo coisas em Javascript para resolver problemas que você provavelmente nem sabe que tem e em outras linguagens para resolver problemas que eu tenho.
https://github.com/mtmr0x
@mtmr0x
- Patrocínio: Pipefy, Globo.com, Meteor, Apollo, Taller, Fullcircle, Quanto, Udacity, Cubos, Segware, Entria
- Apoio: Concrete, Rung, LuizaLabs, Movile, Rivendel, GreenMile, STQ, Hi Platform
- Promoção: InfoQ, DevNaEstrada, CodamosClub, JS Ladies, NodeBR, Training Center, BrazilJS, Tableless, GeekHunter
- Afterparty: An English Thing
A Practical Approach to React Native at All Things Open ConferenceTracy Lee
Practical approach to creating your first React Native talk given at All Things Open Conference. Learn how you should get started with React Native and the path of least resistance.
Adding a modern twist to legacy web applicationsJeff Durta
Avoid misery of working with legacy code
We will see how you can add independent and isolated components to existing pages; pages that may be difficult to change
React and Flux allow you to make self-contained additions that handle their own data access/persistence
When I arrived at Credit Karma I needed to find and connect with people from different teams across multiple projects and verticals.
The problem was that there was no good way to accomplish this except by talking to as many people at the company as possible to find out about the different roles and groups working on things. I decided I needed a way to search for people in order to speed up my workflow.
This resulted in the design and implementation of a pet project called Aura. This presentation is about the process of creating Aura and how it gathered a cult following of support at Credit Karma. I will be covering the problem space, the technology and the methods of winning mind share that led to the execution of the project. This includes React, Electron, Firebase and a host of other libraries and services that allowed Aura to be built over some weekends without the need of a server.
Times Square is (at least before the Coronavirus...) the most visited place globally with about 380,000 pedestrian visitors a day - roughly the same amount of people which go to Wix’s dashboard.
Building a page which receives such high traffic requires having great performance and intelligent architecture.
In this talk, Eyal will go over the challenges of rebuilding Wix’s dashboard, the architecture and how we got it to load under 1 second.
Similar to ProvJS: Six Months of ReactJS and Redux (20)
In 2015, I used to write extensions for Joomla, WordPress, phpBB3, etc and I ...Juraj Vysvader
In 2015, I used to write extensions for Joomla, WordPress, phpBB3, etc and I didn't get rich from it but it did have 63K downloads (powered possible tens of thousands of websites).
Exploring Innovations in Data Repository Solutions - Insights from the U.S. G...Globus
The U.S. Geological Survey (USGS) has made substantial investments in meeting evolving scientific, technical, and policy driven demands on storing, managing, and delivering data. As these demands continue to grow in complexity and scale, the USGS must continue to explore innovative solutions to improve its management, curation, sharing, delivering, and preservation approaches for large-scale research data. Supporting these needs, the USGS has partnered with the University of Chicago-Globus to research and develop advanced repository components and workflows leveraging its current investment in Globus. The primary outcome of this partnership includes the development of a prototype enterprise repository, driven by USGS Data Release requirements, through exploration and implementation of the entire suite of the Globus platform offerings, including Globus Flow, Globus Auth, Globus Transfer, and Globus Search. This presentation will provide insights into this research partnership, introduce the unique requirements and challenges being addressed and provide relevant project progress.
Your Digital Assistant.
Making complex approach simple. Straightforward process saves time. No more waiting to connect with people that matter to you. Safety first is not a cliché - Securely protect information in cloud storage to prevent any third party from accessing data.
Would you rather make your visitors feel burdened by making them wait? Or choose VizMan for a stress-free experience? VizMan is an automated visitor management system that works for any industries not limited to factories, societies, government institutes, and warehouses. A new age contactless way of logging information of visitors, employees, packages, and vehicles. VizMan is a digital logbook so it deters unnecessary use of paper or space since there is no requirement of bundles of registers that is left to collect dust in a corner of a room. Visitor’s essential details, helps in scheduling meetings for visitors and employees, and assists in supervising the attendance of the employees. With VizMan, visitors don’t need to wait for hours in long queues. VizMan handles visitors with the value they deserve because we know time is important to you.
Feasible Features
One Subscription, Four Modules – Admin, Employee, Receptionist, and Gatekeeper ensures confidentiality and prevents data from being manipulated
User Friendly – can be easily used on Android, iOS, and Web Interface
Multiple Accessibility – Log in through any device from any place at any time
One app for all industries – a Visitor Management System that works for any organisation.
Stress-free Sign-up
Visitor is registered and checked-in by the Receptionist
Host gets a notification, where they opt to Approve the meeting
Host notifies the Receptionist of the end of the meeting
Visitor is checked-out by the Receptionist
Host enters notes and remarks of the meeting
Customizable Components
Scheduling Meetings – Host can invite visitors for meetings and also approve, reject and reschedule meetings
Single/Bulk invites – Invitations can be sent individually to a visitor or collectively to many visitors
VIP Visitors – Additional security of data for VIP visitors to avoid misuse of information
Courier Management – Keeps a check on deliveries like commodities being delivered in and out of establishments
Alerts & Notifications – Get notified on SMS, email, and application
Parking Management – Manage availability of parking space
Individual log-in – Every user has their own log-in id
Visitor/Meeting Analytics – Evaluate notes and remarks of the meeting stored in the system
Visitor Management System is a secure and user friendly database manager that records, filters, tracks the visitors to your organization.
"Secure Your Premises with VizMan (VMS) – Get It Now"
Advanced Flow Concepts Every Developer Should KnowPeter Caitens
Tim Combridge from Sensible Giraffe and Salesforce Ben presents some important tips that all developers should know when dealing with Flows in Salesforce.
Cyaniclab : Software Development Agency Portfolio.pdfCyanic lab
CyanicLab, an offshore custom software development company based in Sweden,India, Finland, is your go-to partner for startup development and innovative web design solutions. Our expert team specializes in crafting cutting-edge software tailored to meet the unique needs of startups and established enterprises alike. From conceptualization to execution, we offer comprehensive services including web and mobile app development, UI/UX design, and ongoing software maintenance. Ready to elevate your business? Contact CyanicLab today and let us propel your vision to success with our top-notch IT solutions.
Innovating Inference - Remote Triggering of Large Language Models on HPC Clus...Globus
Large Language Models (LLMs) are currently the center of attention in the tech world, particularly for their potential to advance research. In this presentation, we'll explore a straightforward and effective method for quickly initiating inference runs on supercomputers using the vLLM tool with Globus Compute, specifically on the Polaris system at ALCF. We'll begin by briefly discussing the popularity and applications of LLMs in various fields. Following this, we will introduce the vLLM tool, and explain how it integrates with Globus Compute to efficiently manage LLM operations on Polaris. Attendees will learn the practical aspects of setting up and remotely triggering LLMs from local machines, focusing on ease of use and efficiency. This talk is ideal for researchers and practitioners looking to leverage the power of LLMs in their work, offering a clear guide to harnessing supercomputing resources for quick and effective LLM inference.
Accelerate Enterprise Software Engineering with PlatformlessWSO2
Key takeaways:
Challenges of building platforms and the benefits of platformless.
Key principles of platformless, including API-first, cloud-native middleware, platform engineering, and developer experience.
How Choreo enables the platformless experience.
How key concepts like application architecture, domain-driven design, zero trust, and cell-based architecture are inherently a part of Choreo.
Demo of an end-to-end app built and deployed on Choreo.
Large Language Models and the End of ProgrammingMatt Welsh
Talk by Matt Welsh at Craft Conference 2024 on the impact that Large Language Models will have on the future of software development. In this talk, I discuss the ways in which LLMs will impact the software industry, from replacing human software developers with AI, to replacing conventional software with models that perform reasoning, computation, and problem-solving.
Why React Native as a Strategic Advantage for Startup Innovation.pdfayushiqss
Do you know that React Native is being increasingly adopted by startups as well as big companies in the mobile app development industry? Big names like Facebook, Instagram, and Pinterest have already integrated this robust open-source framework.
In fact, according to a report by Statista, the number of React Native developers has been steadily increasing over the years, reaching an estimated 1.9 million by the end of 2024. This means that the demand for this framework in the job market has been growing making it a valuable skill.
But what makes React Native so popular for mobile application development? It offers excellent cross-platform capabilities among other benefits. This way, with React Native, developers can write code once and run it on both iOS and Android devices thus saving time and resources leading to shorter development cycles hence faster time-to-market for your app.
Let’s take the example of a startup, which wanted to release their app on both iOS and Android at once. Through the use of React Native they managed to create an app and bring it into the market within a very short period. This helped them gain an advantage over their competitors because they had access to a large user base who were able to generate revenue quickly for them.
Developing Distributed High-performance Computing Capabilities of an Open Sci...Globus
COVID-19 had an unprecedented impact on scientific collaboration. The pandemic and its broad response from the scientific community has forged new relationships among public health practitioners, mathematical modelers, and scientific computing specialists, while revealing critical gaps in exploiting advanced computing systems to support urgent decision making. Informed by our team’s work in applying high-performance computing in support of public health decision makers during the COVID-19 pandemic, we present how Globus technologies are enabling the development of an open science platform for robust epidemic analysis, with the goal of collaborative, secure, distributed, on-demand, and fast time-to-solution analyses to support public health.
Software Engineering, Software Consulting, Tech Lead.
Spring Boot, Spring Cloud, Spring Core, Spring JDBC, Spring Security,
Spring Transaction, Spring MVC,
Log4j, REST/SOAP WEB-SERVICES.
Modern design is crucial in today's digital environment, and this is especially true for SharePoint intranets. The design of these digital hubs is critical to user engagement and productivity enhancement. They are the cornerstone of internal collaboration and interaction within enterprises.
How Recreation Management Software Can Streamline Your Operations.pptxwottaspaceseo
Recreation management software streamlines operations by automating key tasks such as scheduling, registration, and payment processing, reducing manual workload and errors. It provides centralized management of facilities, classes, and events, ensuring efficient resource allocation and facility usage. The software offers user-friendly online portals for easy access to bookings and program information, enhancing customer experience. Real-time reporting and data analytics deliver insights into attendance and preferences, aiding in strategic decision-making. Additionally, effective communication tools keep participants and staff informed with timely updates. Overall, recreation management software enhances efficiency, improves service delivery, and boosts customer satisfaction.
Code reviews are vital for ensuring good code quality. They serve as one of our last lines of defense against bugs and subpar code reaching production.
Yet, they often turn into annoying tasks riddled with frustration, hostility, unclear feedback and lack of standards. How can we improve this crucial process?
In this session we will cover:
- The Art of Effective Code Reviews
- Streamlining the Review Process
- Elevating Reviews with Automated Tools
By the end of this presentation, you'll have the knowledge on how to organize and improve your code review proces
7. WHAT ARE YOU (PROBABLY) GOING TO
NEED?
Webpack
Babel + presets
React-redux
Redux-thunk
Redux-logger
Axios or fetch-polyfill
Immutable.js
React
Redux
Jest or Mocha + JSDOM or Karma + Phantomjs
React-router
React-router-redux
What we actually
care about
8. WHAT ARE YOU (PROBABLY) GOING TO
NEED?
Webpack
Babel + presets
React-redux
Redux-thunk
Redux-logger
Axios or fetch-polyfill
Immutable.js
React
Redux
Jest or Mocha + JSDOM or Karma + Phantomjs
React-router
React-router-redux
What we actually
care about
25. WHAT’S ANNOYING?
Component testing connected components is hard.
I rely (mostly) on functional testing
Export both a connect()-ed and non-connected component
See: Erik Ras’ “ducks”
26. WHAT’S ANNOYING?
It’s difficult to call a method on a component wrapped as a high-order
component…
27. DON’T DO IT
BUT: you probably shouldn’t be doing that anyway:
pass data via callbacks passed from parent component.
Or pass data via a redux action
28. LET’S RECAP
Use ImmutableJS records for domain types in stores
Use ImmutableJS Maps often for store data containers
Use redux-thunk to make remote requests in actions
Async action creators should always return a promise
Reducer cases are not always 1-to-1 with actions
Let me know if you’ve figured out the component testing issue with
connected components…
HoC component wrapping cause some pain
Webpack is really the most annoying part
30. DEBOUNCE EXPENSIVE ACTIONS
Some independent top-level components say what data they want to
fetch from `componentWillMount()`
Debounce a single remote request
34. DECIDE WHAT WORKS FOR YOU
Frameworks are less about prescribing “the
right way” and more about getting everyone
to do things the same way.
- @thom_nic
38. I DON’T NEED ANGULAR-RESOURCE
This is actually (really) boilerplate. Replaced with this:
39. WHY I DON’T NEED ANGULAR-
RESOURCE
… and http thunks of thunks:
40. A WORD TO THE WISE…
Avoid temptation to do client-side data manipulation to attempt to
mirror server state.
Better to always fetch from the server as the source of truth
Editor's Notes
What I’m going to present seems to be working OK for me.
It might not work for you. Try it yourself and decide.
• How many people have written a simple redux app?
• How many people have read some tutorials?
So you’ve heard redux is pretty rad. Lots of people say it’s cool. Maybe you’ve used Angular or Ember or Backbone and Marionette.
Well, react is like that, except….
Also react-router and redux-simple-router.
Also hot module reloading.
And the source maps. Never forget the source maps. You might spend a week getting those two things working.
So before you've started writing any code your package.json is going to look something like this!
Let's backup for a second. What you *really* care about is actually a small number of packages.
These are actually *really* simple to learn.
You’ll spend 4 hours learning this, and two weeks getting the tooling to work.
By the end, you’ll feel like this.
So what I'm really saying is, copy someone else's boilerplate example.
Let’s try to remember what we’re trying to achieve
You might have seen this before.
https://facebook.github.io/flux/docs/overview.html
Gross oversimplification of redux.
Or is it?
The view executes actions via the dispatcher.
Actions update the store (state) via reducers.
The store updates the view via connect() to react props.
This is what you see… Too simple. How do I make a server request??
Source: https://github.com/reactjs/redux/blob/master/examples/todomvc/actions/index.js
The key is always return a new object when you manipulate the store. It lets redux optimize react render passes.
Source: https://github.com/reactjs/redux/blob/master/examples/todomvc/reducers/todos.js
Ok so that's what you (probably) already knew about redux.
If you’re use Python’s record type or Ruby’s struct… it’s just like that. Easy peasy data classes.
Immutability is pretty much essential for redux because of how it optimizes updates.
Immutable.js is definitely cleaner than using Object.assign and spread/ rest to create new objects. (It’s also faster.)
If you’re use Python’s record type or Ruby’s struct… it’s just like that. Easy peasy data classes.
Immutability is pretty much essential for redux because of how it optimizes updates.
Immutable.js is definitely cleaner than using Object.assign and spread/ rest to create new objects. (It’s also faster.)
Should stores hold a single object? A list if it’s
I’ve got a list of nested items on the left… So immediately I know I need stores to hold a sequence of items.
But also I need to be able to determine relations between items. (Normalizr helps with this.)
In addition to the same item appearing both in the list and the main section.
Long term you might want something like an LRU to deal with paging and data bloat.
I need to be able to determine relations between items. (Normalizr helps with this.)
I decided stores should be maps of my domain models. They have child/parent ID references so you can lookup corresponding parent children in each store.
Long term you might want something like an LRU to deal with paging and data bloat.
The reason why actions are disconnected from reducers is because they are not always 1-to-1.
On line 35 the transmitter (child) reducer is populating the store from children in a fetched parent object.
Let's look at connecting your store to view components.
The connect method of react-redux is awesome.
• Components are completely unaware of redux.
• Connect() wrapped components have stores (state) and actions injected into props.
• This makes un-connected components easily testable.
• If you've done Java/Spring this feels like dependency injection
This is why you need redux-thunk. Basically to do anything async.
IDK why it’s not part of redux or react-redux.
When you execute your action, return the promise and you can do things like navigation, close a dialog, etc. when the action completes.
On line 81 I’m calling an action then closing a dialog and navigating to a new page (line 83) when successful.
I could also perform specific steps if the action failed (e.g. 409 conflict on the server)
If you ask me this is more appropriate place to put this logic than e.g. by getting a result from a store.
Components wrapped in connect() can’t be searched for by Component name in shallow render tests. :(
Erik Ras proposes exposing both a connected and non-connected component. See: https://github.com/erikras/ducks-modular-redux
But testing stores is trivial!!!
The connect() method has a workaround: see the `withRef` option.
https://github.com/reactjs/react-redux/blob/master/docs/api.md
This is actually a perfect example of how react state “traps” the application state.
Instead of calling a method to get or change a component’s state, consider passing it from child to parent via a callback, and/or changing by dispatching a redux action.
• Benefit: any part of the view heirarchy can now manipulate that state. E.g. a root view closing all dialogs.
• Line 23 is calling a redux action.
• Line 29 is an example of calling `closeDialogAction` in a promise chain
The connect() method has a workaround: see the `withRef` option.
https://github.com/reactjs/react-redux/blob/master/docs/api.md
Should stores hold a single object? A list if it’s
Actions that might be required by multiple disconnected components (e.g. initial data on page load) can easily be debounced to multiple expensive requests.
This is how I manage the loading state.
actionStarted() dispatches a loading increment action
dispatchActionComplete() and dispatchError() does a decrement.
Redux form solves the problem of trapping current form value in state
Code for validation is trivial
Andrew did a great presentation last month about React.js and I don’t think he used any flux framework.
It works!
• The unidirectional data flow does great things by itself.
• You can build the rest (remote calls + app state) without too much effort.
I’m thinking about ordering some shirts on Teespring – who’s interested? :D
The end.
I work at VoltServer – we make some pretty cool power disitribution technology.
Ask me about Digital Electricity. It’s pretty rad.
Extra stuff if there are questions.
Actions are simple… Really simple.
Replaced standard fetch actions with thunks to create cookie-cutter actions.
Actions that might be required by multiple disconnected components (e.g. initial data on page load) can easily be debounced to multiple expensive requests.