React Redux Isomorphic boilerplate: Best Practice

Isomorphic Web Apps: MVC is contained both in client-side and server-side. Same rendering engines and same JavaScript logic can be used in server-side (by Mehmetcan Gayberi).

This is the best practice of the React-Redux-Boilerplate, which is a simple project to show how the mechanism of isomorphic application, below is some conception which is new and important for me:

Client Rendering

Building static JS file, which is loaded by browsers.

Server Rendering

Users request a page, it renders the required component(s) into an HTML string, and then sends it as a response to the client (by Redux).

Container Components

Provide the data and behavior to presentational or other container components.

const mapStateToProps = (state, ownProps) => {return ...}

const mapDispatchToProps = (dispatch, ownProps) => {return {...}}

const myContainer = connect(mapStateToProps,mapDispatchToProps)(TopicList)

export default myContainer

Presentational Components

1. 
   

   Have no dependencies on the rest of the app.  2) Are concerned with how things look.

class myComponent extends React.Component {render() {...}}

myComponent.propTypes = {...}

export default myComponent

Reducer

Actions describe the fact that something happened, but don’t specify how the application’s state changes in response. This is the job of reducers.

Action

It is information that send data from your application to your store store.dispatch().

Action Creator (by Redux)

1. 
   

   
   

   It is a factory function that creates an action.  2) Calling an action creator only produces an action, but does not dispatch it. You need to call the store’s [dispatch](http://redux.js.org/docs/api/Store.html#dispatch) function to actually cause the mutation.ActionCreator = (...args: any) => Action

Middleware (by redux-thunk)

It is a higher-order function that composes a dispatch function to return a new dispatch function .

middleware => (dispatch, getState)

Play Around

$ git clone https://github.com/wahengchang/react-redux-boilerplate-example$ npm install$ npm run test$ npm run dev

You may also like

• [React][Redux] Isomorphic boilerplate: Adding new page
• Break Down Isomorphic and Universal Boilerplate: React-Redux server rendering

Reference:

https://medium.com/airbnb-engineering/isomorphic-javascript-the-future-of-web-apps-10882b7a2ebc

https://medium.com/monitisemea/isomorphic-universal-javascript-496dc8c4341a

http://redux.js.org/docs/recipes/ServerRendering.html