Sunday, March 26, 2017

Updating Redux state doesn't trigger componentWillReceiveProps - solution

Scenario:

React Redux state is changed. However, the component which listens for state changes does not receive a call to componentWillReceiveProps().

Possible cause:

State should be an immutable object. Updates to it should be made by assigning new objects to its properties, not by modifying current properties like mutable objects. You might be passing the same object ( just modified) as the new updated state.

Solution:
Make sure your state is updated by adding a new object, not just by a modification of an existing state object. If you pass the same old object ( by reference), redux won't detect it as a change. This was done to ensure that we use immutable objects for state.


More details here.

Thursday, March 16, 2017

Simultaneous AJAX calls appear to be executed serially - here's a possible explanation

Scenario:

You issue multiple AJAX requests to your ASP.NET (or any other similar Web Server). In Inspector Console, your requests are fired at the same time. However, it appears that one is starting to execute only after one request is finished.

Probable explanation:

Locking at the server side is the probable reason for this behavior. For example, if all your server side scripts access Session object, they need to wait in a queue for Session to become available. Session becomes available only when one of the simultaneous requests is finished. This is why it appears as a serial execution.


One easy workaround:
If you can , declare your ASP.NET MVC controller / page as readonly when it comes to accessing the Session object.


From the Stack Overflow thread:

Session is blocking access to other ones.

This is because session is single threaded per session. Requests to ASP scripts for the same session can only be processed sequentially so only one request will be handled at a time. To stop this you will need to stop using session on the page and turn it off: http://support.microsoft.com/kb/244465/en-us. If you need session you may need to instead use a database.


Details here in this useful forum thread

This same story applies to all shared resources on the server side. One great way to minimize these events, is to  replace Session object with Database.

Tuesday, March 14, 2017

Solution for node error:Cannot find module 'internal/fs' ( for gulp )

Error scenario:

-You run gulp 
-gulp fails with exception "Cannot find module 'internal/fs'"


Probable cause:
-Your node version has been changed recently
It's likely that the gulp script would work with an older version of node. New version you installed won't work with it. There are two options here:
1. To revert to old node version
2. To reinstall node_modules

In this article, we will use option #2.

Fix:
Try to delete all node modules and reinstall them. A command sequence like this would do:

npm cache clean
rm -Rf node_modules/
npm install

More information on this fix can be found here.

Sunday, March 12, 2017

JavaScript fundamentals - pass by value / pass by reference

In this post, I would like to make a few simple examples showing the way JavaScript handles the standard programming language features -  pass by reference and pass by value.

A very good summation of JS behavior in this area is given here at StackOverflow post:

  • Javascript is always pass by value, but when a variable refers to an object (including arrays), the "value" is a reference to the object.
  • Changing the value of a variable never changes the underlying primitive or object, it just points the variable to a new primitive or object.
  • However, changing a property of an object referenced by a variable does change the underlying object.
Based on these facts, we can easily resolve the following simple operation:

var a=12;
a=13;

b=a;
b=14;

document.write("A="+a+"<br/>");

document.write("B="+b);
/*
since a and b are primitive types:
a is now 13
b is now 14
*/
Here is a Fiddle of a more complex scenario. This scenario shows an example of dealing with objects and arrays. It's clear that that in case of assignment operation with objects, the JS will behave as any other language which uses "pass by reference":





Wednesday, March 8, 2017

Some notes on redux/ES6/react

-Actions must have type property.The rest of object's properties are arbitrary

-Be careful with exporting classes. They need to be instanced after import.

-Make sure your next state resets the props on which components depend, as componentWillReceivedProps() won't be called unless the prop it's bound to hadn't  been actually changed!

combineStores changes the structure of state object.
Each reducer inside of the combined reducer object gets a property.

For example:

combineReducers{

    appReducer,
    selectActivityReducer
}

will result in a state object like this:

{
    appReducer:{
      //state variables set in appReducer
   }
   ,

   selectActivityReducer:{
      ///state variables set in selectActivityReducer
   }

}




For redux, and react-redux, documentation is incomplete. It's a good idea to look at blogs of some of the key code contributors, or git repos directly.


UI state should be separated from data state, if possible.

UI componentns should be stateless, functional and separated in a special folder.

Container components should be connected to redux store and should receive updates using props. They should call UI components, and set props for them.

Another good idea is to look for blog posts of people who already had problems with Redux/React and who can share some useful concepts and tips. For example, here:
https://medium.com/@docodemore/why-you-don-t-need-react-redux-31b5aebb38a9#.g6b0xmvqt




-Reducers should be pure

Actions are triggered from container components.


If using webpack 2, every loader needs to have suffix -loader when used. For example:

{
  test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
  loader: 'url-loader?limit=10000&mimetype=image/svg+xml'
}

instead of

{
  test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
  loader: 'url?limit=10000&mimetype=image/svg+xml'
}


Import destructuring... ES6

In ES6 import, we need to be careful about a feature called destructuring.

Example:

import MyComp from './MyComp'

import {MyComp} from 'MyComp'

The results of these two statements are not the same.

The second example uses destructuring to extract MyComp from export.default object in MyComp.js.

The first example pulls the whole export.default object.

Details:

http://stackoverflow.com/questions/33524696/es6-destructuring-and-module-imports

mapDispatchToProps - explanation


48down voteaccepted
I feel like none of the answers have crystallized why mapDispatchToProps is useful.
This can really only be answered in the context of the container-component pattern, which I found best understood by first reading:
then
In a nutshell, your components are supposed to be concerned only with displaying stuff. The only place they are supposed to get information from is their props.
Separated out from this is the concern about:
  • how you get the stuff to display,
  • and how you handle events.
That is what containers are for.
Therefore, a "well designed" component in the pattern look like this:
class FancyAlerter extends Component {
    sendAlert = () => {
        this.props.sendTheAlert()
    }

    render() {
        <div>
          <h1>Today's Fancy Alert is {this.props.fancyInfo}</h1>
          <Button onClick={sendAlert}/>
        </div>
     }}
See how this component gets the info it displays from props (which came from the redux store via mapStateToProps) and it also gets its action function from its props: sendTheAlert().
That's where mapDispatchToProps comes in: in the corresponding container
FancyButtonContainer.js
function mapDispatchToProps(dispatch) {
    return({
        sendTheAlert: () => {dispatch(ALERT_ACTION)}
    })
}

function mapStateToProps(state} {
    return({fancyInfo: "Fancy this:" + state.currentFunnyString})
}

export const FancyButtonContainer = connect(
    mapStateToProps, mapDispatchToProps)(
    FancyAlerter
)
I wonder if you can see, now that it's the container [1] that knows about redux and dispatch and store and state and ... stuff.
The component in the pattern, FancyAlerter, which does the rendering doesn't need to know about any of that stuff: it gets its method to call at onClick of the button, via its props.
And ... mapDispatchToProps was the useful means that redux provides to let the container easily pass that function into the wrapped component on its props.
All this looks very like the todo example in docs, and another answer here, but I have tried to cast it in the light of the pattern to emphasize why.
(Note: you can't use mapStateToProps for the same purpose as mapDispatchToProps for the basic reason that you don't have access to dispatch inside mapStateToProp. So you couldn't use mapStateToProps to give the wrapped component a method that uses dispatch.
I don't know why they chose to break it into two mapping functions - it might have been tidier to have mapToProps(state, dispatch, props) IE one function to do both!)




http://stackoverflow.com/questions/39419237/what-is-mapdispatchtoprops

PSR-1 and PSR-2 coding standards for PHP

Visual aspects of code play a significant role in raising or drowning developer's productivity. In case that there's too much clutte...