Example #3 - Sliders

This example demonstrates side effects through sagas.

We will build a slider that will update its image every 5 seconds.

Final result

The final result will look like this:

Whenever you press any of the dots the 5 second counter will reset.

# if using yarn
yarn add kea-saga redux-saga

# if using npm
npm install kea-saga redux-saga --save

import sagaPlugin from 'kea-saga'

const store = getStore({
  plugins: [
    sagaPlugin
  ]
})

1. The static component

Based on the knowledge from the previous chapters, you should be able to build a static slider.

The code for it will look something like this:

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { kea } from 'kea'

import images from './images'     // array of objects [{ src, author }, ...]
import range from '~/utils/range' // helper, range(3) === [0, 1, 2]

@kea({
  actions: () => ({
    updateSlide: index => ({ index })
  }),

  reducers: ({ actions }) => ({
    currentSlide: [0, PropTypes.number, {
      [actions.updateSlide]: (state, payload) => payload.index % images.length
    }]
  }),

  selectors: ({ selectors }) => ({
    currentImage: [
      () => [selectors.currentSlide],
      (currentSlide) => images[currentSlide],
      PropTypes.object
    ]
  })
})
export default class Slider extends Component {
  render () {
    const { currentSlide, currentImage } = this.props
    const { updateSlide } = this.actions

    const title = `Image copyright by ${currentImage.author}`

    return (
      <div className='kea-slider'>
        <img src={currentImage.src} alt={title} title={title} />
        <div className='buttons'>
          {range(images.length).map(i => (
            <span key={i}
                  className={i === currentSlide ? 'selected' : ''}
                  onClick={() => updateSlide(i)} />
          ))}
        </div>
      </div>
    )
  }
}

Giving us the following result:

Click it! It works, but won't change the slides automatically.

2. Just Add Sagas

For that we need to write some sagas.

Sagas provide a nice way to write code that has side effects. They might be unfamiliar at first, but when you get to know them, you'll wonder how you ever wrote your frontend code without them.

I need to brush up on my Sagas

First we must import the redux-saga/effects that we need. We'll also import a delay effect that just sleeps for the given amount of milliseconds.

import { take, race, put } from 'redux-saga/effects'
import delay from '~/utils/delay'

And then we create a start generator function inside @kea({}). This function is called every time your component is mounted.

Inside this start function we create a race condition between two competing effects: a delay of 5 seconds and the action updateSlide being triggered.

The code pauses at the yield race() call until one of the two conditions is met.

In case the timeout won the race, we fetch the latest slide (yield this.get(..) is a shorthand to use the selectors defined in @kea({}))... and then we dispatch (yield put()) the updateSlide action with the next slide.

@kea({
  actions: () => ({
    updateSlide: index => ({ index })
  }),

  // ...

  // run this saga when the component is mounted
  start: function * () {
    const { updateSlide } = this.actions

    while (true) {
      const { timeout } = yield race({
        change: take(updateSlide.toString()),
        timeout: delay(5000)
      })

      if (timeout) {
        const currentSlide = yield this.get('currentSlide')
        yield put(updateSlide(currentSlide + 1))
      }
    }
  }
})
export default class StaticSlider extends Component {
  // as it was
}

All of this results in this:

Now if you will always just have one slider on your screen, you're done. If you wish to have many slider instances, you will run into the same issue as with the dynamic counter example - both sliders will listen to and react to the updateSlide actions unless you explicitly prohibit them.

The code below demonstrates a way to prevent this from happening. It also shows how to listen to actions using the takeEvery helper and the workers object.