next redux saga

Next-Redux-saga

¡Este proyecto ya no se mantiene!

Porque next.js ha crecido enormemente y otros paquetes con mejor soporte han cubierto la funcionalidad de redux-saga SSR. Consulte el #79 para obtener más información.

redux-saga Hoc para Next.js. Ejecución controlada redux-saga para la representación del lado del servidor.

Atención: ¡HOC sincrónico ya no se admite desde la versión 4.0.0!

Instalación

yarn add next-redux-saga

Empezando

Echa un vistazo al ejemplo oficial de Next.js o clona este repositorio y ejecute el ejemplo local.

Prueba el ejemplo local

1. Clon este repositorio
2. Dependencias de instalación: yarn
3. Inicie el proyecto: yarn start
4. Abra http: // localhost: 3000

Uso

next-redux-saga usa la tienda Redux creada por Next-Redux-Wrapper. Consulte su documentación para obtener más información.

Configurar el envoltorio de la tienda

 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

Configurar componente personalizado _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 ) )

Conectar componentes de la página

 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 ) 

Colaboradores

Casa de comida de Brent ️ ?

Timon Borter ️ ?

Artem Abzanov ️

Robbin Habermehl ️

Que contribuye

1. Bifurca este repositorio a su propia cuenta de Github y luego clona a su dispositivo local
2. Instale las dependientes: yarn
3. Enlace el paquete al directorio del módulo global: yarn link
4. Ejecutar yarn test --watch y comenzar a hacer sus cambios
5. Puede usar yarn link next-redux-saga para probar sus cambios en un proyecto real

LICENCIA

Este proyecto tiene licencia bajo los términos de la licencia MIT. Consulte el archivo de licencia para obtener más información.