React Redux Isomorphic Application: 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 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
Hacker Noon is how hackers start their afternoons. We’re a part of the @AMI family. We are now accepting submissions and happy to discuss advertising & sponsorship opportunities.
If you enjoyed this story, we recommend reading our latest tech stories and trending tech stories. Until next time, don’t take the realities of the world for granted!
