Soya Next
  • Introduction
  • Packages
    • soya-next
    • soya-next-cli
    • soya-next-scripts
    • soya-next-server
  • Getting Started
    • Setup
    • Directory Structure
    • Creating an App
    • Build the App for Production
  • User Guide
    • Analyzing Dependencies
    • Configure Redux Store
    • Custom Babel Configuration
    • Custom Document
    • Custom Marlint Configuration
    • Custom Routing
    • Typescript Configuration
    • Universal Environment Configuration
  • Migration Guide
    • 0.4.x to 0.5.x
  • API Reference
    • applyReducers([reducers])
    • createPage([...connectArgs])(Page, [reducers])
    • createRouter(app, [options])
    • withLocale
    • LocaleLink
  • Examples
    • Apollo
    • Authentication
    • CSS Modules
    • CSS Modules with SCSS
    • Custom Routes
    • Internationalization
    • Internationalization with Redux
    • Redirection
    • TodoMVC
  • License
Powered by GitBook
On this page
  • Arguments
  • Returns
  • Examples
  • Accessing and mutating cookie
  • Accessing default locale, locale, and site locales
  • Dispatching an action and retrieving redux state
  1. API Reference

createPage([...connectArgs])(Page, [reducers])

PreviousapplyReducers([reducers])NextcreateRouter(app, [options])

Last updated 6 years ago

Configures and connects to Redux store, loads reducers dynamically, handles client side URL redirection, and makes cookie, default locale, locale, and site locales available as Page props and in the getInitialProps lifecycle method.

It will also make them available to the component hierarchy below, through the following method calls:

  • Cookie through withCookies calls, imported from react-cookie.

  • Default locale, locale, and site locales through withLocale calls, imported from soya-next/i18n.

Arguments

  • [...connectArgs] ()

  • Page (ReactComponent): Page component to be enhanced.

  • [reducers] (Object): An object of reducers which will be loaded dynamically with the given name.

    Note: Make sure each reducers has unique name within your application reducers.

Returns

(ReactComponent): An enhanced Page component class.

Examples

Accessing and mutating cookie

import { createPage } from 'soya-next'

const Page = ({ cookies }) => (
  <div>Welcome, {cookies.get('username')}!</div>
);

Page.getInitialProps = ({ cookies }) => {
  cookies.set('username', 'Soya');
  return null;
};

export default createPage()(Page);

Accessing default locale, locale, and site locales

import { createPage } from 'soya-next'

const Page = ({
  defaultLocale,
  locale,
  siteLocales,
}) => (
  <div>
    <div>Current locale is {locale}.</div>
    <div>Default locale is {defaultLocale}.</div>
    <div>Supported site locales are {siteLocales.join(', ')}.</div>
  </div>
);

Page.getInitialProps = ({
  defaultLocale,
  locale,
  siteLocales,
}) => {
  return null;
};

export default createPage()(Page);

Dispatching an action and retrieving redux state

import { createPage } from 'soya-next'
import { bindActionCreators } from 'redux';

const actions = {
  addTodo: text => ({
    type: 'ADD_TODO',
    text,
  }),
};

const reducers = {
  todos(state = [], action) {
    switch (action.type) {
      case 'ADD_TODO':
        return state.concat(action.text);
      default:
        return state;
    }
  },
};

const mapStateToProps = state => ({
  todos: state.todos,
});

const mapDispatchToProps = dispatch => bindActionCreators({ addTodo }, dispatch);

const Page = ({ todos }) => (
  <ul>
    {todos.map((todo, index) =>
      <li key={index}>{todo}</li>
    )}
  </ul>
);

Page.getInitialProps = ({ store }) => {
  store.dispatch(addTodo('Learn Soya-Next'));
  return null;
};

export default createPage(mapStateToProps, mapDispatchToProps)(Page, reducers);
Connect Arguments