trowel-tools
v0.0.3
Published
Helpers for Trowel
Downloads
3
Readme
Trowel tools
Helpers for Trowel
These helpers help you to make React application using:
- react-redux
- [email protected]
- [email protected]
Here's an example of your App component:
/*--- App.jsx ---*/
import {Component, PropTypes} from 'react';
import {createStore} from 'redux';
import getMyInitialState from '../redux/my-initial-state.js';
import myReducer from '../redux/my-reducer.js';
/*
it is a very root application component
NOT NEEDED to be wrapped in react-redux, react-router or react-hot-loader conatiners
*/
export default class App extends Component {
render(props) {
return (
<div>{props.appData.greating}</div>
);
}
}
App.propTypes = {
appData: PropTypes.shapeOf({
greating: PropTypes.string
})
};
// REQUIRED: static function creating redux store
App.configureStore = () => createStore(myReducer, getMyInitialState());
trowelTools.bundle
(App: React.Component) => {
initClient: (
appState?: any = {},
appData?: any = {},
mountElementId?: string = 'mount'
) => void
}
Helps you to wrap your App component by:
<Provider>
from react-redux<BrowserRouter>
from react-router-dom<AppContainer>
from react-hot-loader
/*--- index.js – entry file for webpack ---*/
import {bundle} from 'trowel-tools';
import getMyInitialState from '../redux/my-initial-state.js';
const appBundle = bundle(App);
// will be passed as appData prop
const appData = {
greating: 'Hello World!'
};
appBundle.initClient(getMyInitialState(), appData, 'mount');
// if hot-module-replacement is enabled
if (module.hot) {
module.hot.accept('./App.jsx', () => {
const NextApp = require('./App.jsx').default;
// .updateClient method will appear after you called .initClient
appBundle.updateClient(NextApp);
});
}
trowelTools.initSSR
(
App: React.Component,
params: {
location: string,
routerContext: {},
appState?: any,
appData?: any
}
) => React$Element
Helps you to wrap your App component by:
<Provider>
from react-redux<StaticRouter>
from react-router-dom<AppContainer>
from react-hot-loader
/*--- ssr.js – Server-Side rendering ---*/
import {renderToString} from 'react-dom/server';
import {initSSR} from 'trowel-tools';
import App from './App.jsx';
import getMyInitialState from '../redux/my-initial-state.js';
export default function (location) {
const routerContext = {};
const appState = getMyInitialState();
const appData = {
greating: 'Hello World!'
};
const app = initSSR(App, {location, routerContext, appState, appData});
return renderToString(app);
}