Monthly Archives: June 2018

Why is there white space above the header?

I set no margin or padding at all, but there is white space above the header. <header style=”background-color:gray”> <h1>Test margin collapsing</h1> </header> There is no margin in the "header" or "h1". So why? First of all, the browser adds margin to "h1". Open your developer console, you can see things like "-webkit-margin-before: 0.67em;" So there […]

Ajax in Redux with Thunk – Can’t be more weird

How can a ajax call fit into Redux paradigm? State: The state will be updated after ajax call is over. No problem. Reducer: Reducer will change the state when ajax call is over. No problem. Action: Action can be used to define "Ajax call over" But where to put the logic of really doing an […]

What will the window.origin be in html5 sandbox iframes?

I did a test about this. If Your site is www.host.com The iframe src is also www.host.com Then sanbox + "allow-same-orign" enabled => window.origin will be "www.host.com" sanbox + "allow-same-orign" DISABLED => window.origin will be null If Your site is www.host.com The iframe src is www.guest.com Then sanbox + "allow-same-orign" => window.origin will be "www.guest.com" […]

Redux weird thing 3 – Action Creator

You can dispatch an action inside your component, for example, when a button is clicked, like render(){ return ( <div> … <div> <button onClick={ e => this.context.store.dispatch({type: ‘counterChange’, amount: 1}) }> + </button> <button onClick={ e => this.context.store.dispatch({type: ‘counterChange’, amount: -1}) }> – </button> </div> </div> ); } But a more preferred way is to […]

Redux – avoid to pass props down component tree manually – 4. Build container components more easily with connect()

With connect() you don’t have to manually write the container component as a Component class. const CounterComponentContainer = connect( // store.state => props of child component. Normally it’s extracted as a function called mapStateToProps() state => { return {counter: state.counter} }, // store.dispatch => props of child component. Normally it’s extracted as a function called […]

Redux – avoid to pass props down component tree manually – 3. Use an extra container component to keep the original one reusable

So a "container" component will be introduced to wrap the original one. The container component will adapt the store structure to "input parameters" the original one needs. Therefore, the original one doesn’t need to access store directly and will be reusable again. //The reusable component, which doesn’t access store any more class CounterComponent extends Component […]

Redux – avoid to pass props down component tree manually – 2. Use Provider to make store accessible to all components

This way every component in the tree can access the store directly. So you don’t need to pass the store manually any more This solution is actually based on React’s Contenxt. function render(){ ReactDOM.render( <Provider store = {rootStore}> <AppComponent appName=”React Demo Site”/> </Provider>, document.getElementById(‘root’)); } class AppComponent extends Component { render() { return ( <div […]

Redux – avoid to pass props down component tree manually – 1. Pass the store down

In the basic example you can see props are passed down the compoent tree manually at every level. It’s very anoying. A simple way to avoid this is to pass Redux store down at every level. It will simplify the code to some extent function render(){ ReactDOM.render( <AppComponent appName=”React Demo Site” store={rootStore}/>, document.getElementById(‘root’)); } class […]

Redux weird thing 1 – combineReducers

If your root component has more than one child component, you will have a big state , so is your reducer // the initial state const initialState = { counter: { value: 0 }, toDo: { itemList: [ {id: 1, text: “be born”, completed: true}, {id: 2, text: “get married”, completed: true}, {id: 3, text: […]