@cra-express/redux-prefetcher

@cra-express/redux-prefetcher

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)

License

MIT