Redux Data SSR
This package provides a High Order Component to make SSR and data fetching painless. It's a wrapper of React Data SSR with Redux bindings.
Instalation
yarn -i redux-data-ssr # Or using npm npm -i redux-data-ssr --save
Note: You'll also had to add the redux / react dependencies.
Examples
The examples folder contains several exmaples.
Usage
Simple Example
// List.js;;;; const List = { if loading return <span>Loading</span>; return <div> <h1>List</h1> <ul> list|| </ul> </div> ;}; ListpropTypes = isLoading: PropTypesbool list: PropTypesarray; // This function will be incharge of fetching the data// `props` are the component propertiesconst getData = ; const mapStateToProps = loading: statelistloading list: statelistdata; const mapDispatchToProps = ; getData mapStateToProps mapDispatchToPropsList; // actions.js const getList = { ; return { ; }}; // client.js;;;; const store = ; // Server Side Rendered data; // store;;; const configureStore = { const store = ; return store;}; ; // reducer;;; const rootReducer = ; ;
Api
connectWithGetInitialData(options) => (mapStateToProps, mapDispatchToProps) => (ReactComponent) => ReactComponent
Create a high-order React component class that fetches data server side and re uses the data in client side (or fetches it if it isn't available) using Redux as the data store.
options
The options object is the same configuration of React Data SSR.
mapStateToProps
Redux's mapStateTopProps function.
mapDispatchToProps
Redux's mapDispatchToProps function.
REDUCER_KEY
The state's key in which Redux data SSR will store information.
reducer
The reducer function.