@cra-express/redux-prefetcher NPM

@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

// server.js
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 />)
    })
}

// MyView.js
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 }) {
    // ctx is object containing express req and res objects
    // store is redux store
    // match is router match information, you can get params here
    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);