redux-saga-beginner-tutorial icon indicating copy to clipboard operation
redux-saga-beginner-tutorial copied to clipboard

Code in the beginner tutorial does not match the finished code in sagas and doesn't work

Open David-A-RogersHS2 opened this issue 6 years ago • 3 comments

The code in the tutorial does not execute properly. Pressing the async increment button has no effect.

The problem is that the tutorial specifies adding this code:

// notice how we now only export the rootSaga
// single entry point to start all Sagas at once
export default function* rootSaga() {
  yield all([
    helloSaga(),
    watchIncrementAsync()
  ])
}

The sagas branch has the correct code:

// notice how we now only export the rootSaga
// single entry point to start all Sagas at once
export default function* rootSaga() {
  yield [
    helloSaga(),
    watchIncrementAsync()
  ]
}

David-A-RogersHS2 avatar Aug 15 '18 22:08 David-A-RogersHS2

npm test doesn't run with the given sagas.js in tutorial. It should be changed with export functions.

import { delay } from 'redux-saga'
import { call, put, takeEvery } from 'redux-saga/effects'

export function* helloSaga() {
  console.log('Hello Saga!')
}

export function* incrementAsync() {
  yield call(delay, 1000)
  yield put({type: 'INCREMENT'})
}

export function* watchIncrementAsync() {
  yield takeEvery('INCREMENT_ASYNC', incrementAsync)
}

Again its in the sagas branch.

Pasi-D avatar Sep 14 '18 03:09 Pasi-D

i missed it initially too but on https://redux-saga.js.org/docs/introduction/BeginnerTutorial.html the code right after "Well, redux-saga provides a way to make the above statement possible. Instead of calling delay(1000) directly inside incrementAsync, we'll call it indirectly:" that changes the delay invocation to using call also adds export to incrementAsync.

dgobaud avatar Sep 24 '18 03:09 dgobaud

The code in the tutorial does not execute properly. Pressing the async increment button has no effect.

The problem is that the tutorial specifies adding this code:

// notice how we now only export the rootSaga
// single entry point to start all Sagas at once
export default function* rootSaga() {
  yield all([
    helloSaga(),
    watchIncrementAsync()
  ])
}

The sagas branch has the correct code:

// notice how we now only export the rootSaga
// single entry point to start all Sagas at once
export default function* rootSaga() {
  yield [
    helloSaga(),
    watchIncrementAsync()
  ]
}

Also, I notice that in the Counter.js file, the sagas branch has us adding onIncrementAsync to Counter.propTypes [Line 28 of Counter.js in the sagas branch]. This needs to be added to the tutorial. Students are never instructed to do this.

ydax avatar Jan 16 '20 12:01 ydax