markerikson / project-minimek Goto Github PK
View Code? Open in Web Editor NEWA sample app to demonstrate various useful Redux techniques, accompanying the blog series at http://blog.isquaredsoftware.com/series/practical-redux
License: MIT License
A sample app to demonstrate various useful Redux techniques, accompanying the blog series at http://blog.isquaredsoftware.com/series/practical-redux
License: MIT License
Hey,
Thanks for great tutorial!
I'm just following, looking at where to keep form state so that it doesn't re render the entire tree for every input.
I noticed you're using previous / current state in onChange method, but you're not calling setState with callback function:
Is there any specific reason why?
Thanks!
To reproduce:
Increase the default debounce time:
diff --git a/src/common/components/FormEditWrapper.jsx b/src/common/components/FormEditWrapper.jsx
index 2276e58..800c4a0 100644
--- a/src/common/components/FormEditWrapper.jsx
+++ b/src/common/components/FormEditWrapper.jsx
@@ -24,7 +24,7 @@ class FormEditWrapper extends Component {
onChangePropName : "onChange",
singleValue : false,
passIsEditing : true,
- dispatchDelay : 250,
+ dispatchDelay : 2500,
}
constructor(props) {
This isn't required, but it makes it much easier to demonstrate.
Create a new pilot, set the name, and save the changes:
(please ignore the failure at the end, it seems to be an unrelated issue)
Note that the state saved to the store does not have the entered pilot name:
Pilot: {
items: [
'cjrb9jhul00003f5viun8eqwk'
],
itemsById: {
cjrb9jhul00003f5viun8eqwk: {
name: 'New Pilot', // <------- HERE
rank: 'Private',
gunnery: 4,
piloting: 5,
age: 25,
id: 'cjrb9jhul00003f5viun8eqwk'
}
},
meta: {
maxId: null
}
}
{
type: 'PILOT_EDIT_START'
}
{
type: 'PILOT_EDIT_STOP'
}
{
type: 'EDIT_ITEM_APPLY',
payload: {
itemType: 'Pilot',
itemID: 'cjrb9jhul00003f5viun8eqwk'
}
}
{
type: 'EDIT_ITEM_STOP',
payload: {
itemType: 'Pilot',
itemID: 'cjrb9jhul00003f5viun8eqwk'
}
}
{
type: 'PILOT_SELECT',
payload: {
currentPilot: null
}
}
If you wait for the debounce timeout length after editing, then you will get an additional action and the application works:
{
type: 'EDIT_ITEM_UPDATE',
payload: {
itemType: 'Pilot',
itemID: 'cjrb9rai700003f5vqeja41be',
newItemAttributes: {
name: 'hello'
}
}
}
Relatedly, it's my understanding that in general you should make use of the debounced function's .clear()
or .flush()
methods when the component is unmounted, otherwise you might call the function after the component is gone. This isn't a problem with this example, but in a larger one that makes use of this
it could be and React will warn about it.
If you do use flush()
, you might get a state update "too late", which can cause strange issues. In our case, the UI was updated and thus it "looked right", but the data was never sent to the backend.
In our case, we triggered this type of behavior by using automated tests. These tend to be much faster at entering data and submitting forms.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.