redux-data-ssr

    1.2.1 • Public • Published

    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
    import React from 'react';
    import PropTypes from 'prop-types';
    import { connectWithGetInitialData } from 'redux-data-ssr';
    import { getList } from './actions';
     
    const List = ({loading, list}) => {
      if (loading)
        return <span>Loading</span>;
      return (
        <div>
          <h1>List</h1>
          <ul>
            {(list||[]).map((l, i) => <li key={i}>${l}</li>)}
          </ul>
        </div>
      );
    };
     
    List.propTypes = {
      isLoading: PropTypes.bool,
      list: PropTypes.array,
    };
     
    // This function will be incharge of fetching the data
    // `props` are the component properties
    const getData = ({ getList }) => getList();
     
    const mapStateToProps = state => ({
      loading: state.list.loading,
      list: state.list.data,
    });
     
    const mapDispatchToProps = dispatch => ({
      getList: () => dispatch(getList()),
    });
     
    export default connectWithGetInitialData({ getData })(mapStateToProps, mapDispatchToProps)(List);
     
    // actions.js
     
    export const getList = () => dispatch => {
      dispatch({ type: LIST_LOADING });
      return new Promise(rs => {
        setTimeout(() => {
          dispatch({
            type: LIST_LOADED,
            data: [
              'first',
              'second',
              'thrid',
            ],
          });
          rs();
        }, 1000);
      })
    };
     
    // client.js
    import { hydrate } from 'react-dom';
    import configureStore from './store';
    import { Provider } from 'react-redux';
    import List from './List';
     
    const store = configureStore(window.__PRELOADED_STATE__);  // Server Side Rendered data
    hydrate(
      <Provider store={store}>
        <List />,
      </Provider>,
      document.getElementById('root')
    );
     
    // store
    import { createStore, applyMiddleware } from 'redux';
    import thunk from 'redux-thunk';
    import rootReducer from './reducer';
     
    const configureStore = preloadedState => {
      const store = createStore(
        rootReducer,
        preloadedState,
        applyMiddleware(thunk)
      );
      return store;
    };
     
    export default configureStore;
     
    // reducer
    import { combineReducers } from 'redux';
    import { REDUCER_KEY, reducer } from 'redux-data-ssr';
    import list from './reducerList';
     
    const rootReducer = combineReducers({
      [ REDUCER_KEY ]: reducer,
      list,
    });
     
    export default 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.

    Install

    npm i redux-data-ssr

    DownloadsWeekly Downloads

    8

    Version

    1.2.1

    License

    MIT

    Last publish

    Collaborators

    • nickcis