next redux saga

Next-Redux-Saga

이 프로젝트는 더 이상 유지되지 않습니다!

next.js 대규모로 성장했으며 더 나은 지원을 가진 다른 패키지는 redux-saga SSR 기능을 다루었습니다. 자세한 내용은 #79를 참조하십시오.

redux-saga hoc for next.js. 서버 측 렌더링을위한 제어 된 redux-saga 실행.

주의 : 버전 4.0.0 이후 동기식 HOC가 더 이상 지원되지 않습니다!

설치

yarn add next-redux-saga

시작하기

공식 Next.js 예제를 확인 하거나이 저장소를 복제하고 로컬 예제를 실행하십시오.

로컬 예제를 시도하십시오

1. 이 저장소를 복제하십시오
2. 의존성 설치 : yarn
3. 프로젝트 시작 : yarn start
4. http : // localhost : 3000을 엽니 다

용법

next-redux-saga Next-Redux-Wrapper가 만든 Redux 매장을 사용합니다. 자세한 내용은 문서를 참조하십시오.

상점 래퍼를 구성하십시오

 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 ) 

기고자

브렌트 식사 하우스 켈 ?

티몬 보터 켈 ?

Artem Abzanov 켈

Robbin Habehl 켈

기여

1. 이 저장소를 자신의 github 계정으로 포크 한 다음 로컬 장치로 복제하십시오.
2. 부근을 설치하십시오 : yarn
3. 패키지를 글로벌 모듈 디렉토리 : yarn link 에 연결합니다.
4. yarn test --watch 시작하고 변경을 시작하십시오
5. yarn link next-redux-saga 사용하여 실제 프로젝트의 변경 사항을 테스트 할 수 있습니다.

특허

이 프로젝트는 MIT 라이센스 조건에 따라 라이센스가 부여됩니다. 자세한 내용은 라이센스 파일을 참조하십시오.