@cra-express/redux-prefetcher (deprecated)
DEPRECATED! No support/PR accepted for this package anymore.
Alpha stage, API may change, don't use on production yet!
Simple utility to map your routes and prefetch your data on server using Redux as store
Prerequisites
- Redux
- React Router with array config
- Promise support
Start
npm i @cra-express/redux-prefetcher
Use
import { getInitialData } from '@cra-express/redux-prefetcher'
import { renderToNodeStream } = from 'react-dom/server';
import routes from './my-app-routes'
import reducer from './my-app-reducer'
function handleUniversalRender (req, res) {
const ctx = { req, res }
const store = createStore(reducer);
return getInitialData(ctx, store, routes)
.then(() => {
return renderToNodeStream(<App />)
})
}
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { fetchTodo } from './my-todo-reducer';
class MyView extends Component {
static loadData({ ctx, store, match }) {
return store.dispatch(fetchTodo());
}
render() {
return (
<ul>
{this.props.todo.data.map((t, i) => (
<li key={i}>{t}</li>
))}
</ul>
);
}
}
const mapStateToProps = (state) => ({
todo: state.todo,
});
export default connect(mapStateToProps)(MyView);
License
MIT