Not sure if I'm understanding what you are asking; but if you are looking to do SSR with React you will want to utilize the following: https://facebook.github.io/react/docs/react-component.html#componentwillmount https://facebook.github.io/react/docs/react-dom-server.html

What I mean by connected is: import React, { Component } from 'react' ; import { connect } from 'react-redux' ; import fetchTodos from './actions' ; import { Loading } from './commons' ; @connect( state => ({ todos: state.todos }), { fetchTodos }) class Todo extends Component { state = { loading: true } componentDidMount() { ( async () => { await this .props.fetchCategory( 'home' ); this .setState({ loading: false }); })(); } _renderTodos() { const { todos } = this .props; todos.map(todo => { < li key = {Math.random()} > todo </ li > }); } render() { const component = loading ? < Loading /> : ( < ul > {this._renderTodos()} </ ul > ) return component; } }

Anh Khoa Ngô do you have a link to your code? I will take a look at it and see if I can help. Ultimately you only want your store connected to the components you want to know what is happening with the store . If you are using redux I normally have things setup as follows: // index.js import React from 'react' ; import { render } from 'react-dom' ; import Root from './Root' ; render(<Root />, document.getElementById( 'root' ); // Root.js import React from 'react' ; import { Provider } from 'react-redux' ; import store from './redux/store' ; import Routes from './Routes' ; export default ( ) => ( <Provider store={store}> <Routes /> </Provider> ); // Routes.js import React from 'react' ; import { browserHistory, Route, Router } from 'react-router' ; export default ( ) => ( <Router history={browserHistory}> // your Routes here </Router> );

I hate CSS/design. I can code out the logic on front and backend, & really actually enjoy making documentation so I & others can know what is going on, but I can't build a UI to save my life. I become so disenfranchised with a project as soon as all the coding is done and I have to move to the UI/UX development.

@mikeq I've used CRA before but is it useful for authoring a package from? I know if you want to do any custom configs you have to run the eject script.

@bebraw thanks so much for this information. I had figured out that module was representing ES6 code when looking at the Redux source code. I do tree shaking in my projects so I understood that. I was looking at your webpack demo last night. Very cool. Never would have thought of doing it like that. Thanks again!

I found this short tutorial on how to use webpack2 for authoring libraries: https://webpack.js.org/guides/author-libraries/ I am curious though is externals directly related to my dependencies ? If react is a dependency to my package I should not have it in my package right? It should be something I expect the user to have in their project. So including it as an external would make sense?

Maria Olsen feel free to take a look at both configs in the below repository. I would also recommend Stephen Grider's Webpack 2 course on Udemy if you are wanting to learn that. https://github.com/rockchalkwushock/photography-frontend/tree/beta-2

Yichen Lu if you are not persisting the state then yes on a page refresh the state will return to the initial state whether that be {} or if you have specified an actual initialState. If you are wanting to persist your state I would recommend the following package: https://github.com/rt2zz/redux-persist If you are losing your state on a page redirect or traveling to a different route using react-router you will want to use: https://github.com/reactjs/react-router-redux Hope I answered your question or at least provided you with some good resources!