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 …
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 …
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" …
What will the window.origin be in html5 sandbox iframes? Read More »
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 …
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 …
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 …
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 …
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 – avoid to pass props down component tree manually – 1. Pass the store down Read More »
Disclamer: “Weird” is a neutral word here. In Redux you are supposed to put “all” the data in the store. However, “temp” data like unsubmitted form input, should be inside the components. Data in the store should be cleaned, “official” daa.
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: …