next redux saga

Следующая-Редж-Сага

Этот проект больше не поддерживается!

Потому что next.js выросла массово, а другие пакеты с лучшей поддержкой покрыли функциональность SSR redux-saga . Смотрите #79 для получения дополнительной информации.

redux-saga hoc для lete.js. Контролируемое выполнение redux-saga для рендеринга на стороне сервера.

Внимание: Синхронный HOC больше не поддерживается с версии 4.0.0!

Установка

yarn add next-redux-saga

Начиная

Проверьте официальный пример Next.js или клонируйте этот репозиторий и запустите локальный пример.

Попробуйте местный пример

1. Клонировать это хранилище
2. Установить зависимости: yarn
3. Начните проект: yarn start
4. Откройте http: // localhost: 3000

Использование

next-redux-saga использует магазин Redux, созданный Next-Redux-Wrapper. Пожалуйста, обратитесь к их документации для получения дополнительной информации.

Настройте обертку магазина

 import { applyMiddleware , createStore } from 'redux'
import createSagaMiddleware from 'redux-saga'
import { createWrapper } from 'next-redux-wrapper'

import rootReducer from './root-reducer'
import rootSaga from './root-saga'

const makeStore = context => {
  const sagaMiddleware = createSagaMiddleware ( )
  const store = createStore (
    rootReducer ,
    applyMiddleware ( sagaMiddleware ) ,
  )

  store . sagaTask = sagaMiddleware . run ( rootSaga )

  return store
}

const wrapper = createWrapper ( makeStore )

export default wrapper

Настроить пользовательский компонент _app.js

 import React from 'react'
import App from 'next/app'
import withReduxSaga from 'next-redux-saga'

import wrapper from './store-wrapper'

class ExampleApp extends App {
  static async getInitialProps ( { Component , ctx } ) {
    let pageProps = { }

    if ( Component . getInitialProps ) {
      pageProps = await Component . getInitialProps ( ctx )
    }

    return { pageProps }
  }

  render ( ) {
    const { Component , pageProps } = this . props
    return (
      < Component { ... pageProps } />
    )
  }
}

export default wrapper . withRedux ( withReduxSaga ( ExampleApp ) )

Подключить компоненты страницы

 import React , { Component } from 'react'
import { connect } from 'react-redux'

class ExamplePage extends Component {
  static async getInitialProps ( { store } ) {
    store . dispatch ( { type : 'SOME_ASYNC_ACTION_REQUEST' } )
    return { staticData : 'Hello world!' }
  }

  render ( ) {
    return < div > { this . props . staticData } </ div >
  }
}

export default connect ( state => state ) ( ExamplePage ) 

Участники

Брент Мейдхаус ️ ?

Тимон Бортер ️ ?

Артем Абзанов ️

Роббин Хабермель ️

Внося

1. Разветвляй этот хранилище в своей собственной учетной записи GitHub, а затем клонируйте его на местное устройство
2. Установить зависимость: yarn
3. Связайте пакет с каталогом Global Module: yarn link
4. Запустите yarn test --watch и начните вносить изменения
5. Вы можете использовать yarn link next-redux-saga чтобы проверить свои изменения в реальном проекте

ЛИЦЕНЗИЯ

Этот проект лицензирован в соответствии с Условиями лицензии MIT. См. Файл лицензии для получения дополнительной информации.