CHEN Jian's Java Blog

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 …

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

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 …

Redux weird thing 3 – Action Creator Read More »

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 – 4. Build container components more easily with connect() Read More »

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 – 3. Use an extra container component to keep the original one reusable Read More »

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 – 2. Use Provider to make store accessible to all components Read More »

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: …

Redux weird thing 1 – combineReducers Read More »