redux-saga

Setup

• files changes example

• install packages

    yarn add react-redux redux-saga immer
  

  • redux : global state
  • reduex-saga : middleware is used for async request
  • immer : work with immutable state in a more convenient way

• 8 files you need to setup for this tutorial

    .
    └── config
    |   └── configureStore.js
    └── constants
    |   └── demo.js
    └── pages
    |   └── _app.js
    |   └── demo-redux-saga.js (optional it's for demo)
    └── redux
        ├── actions
        |   └── demo.js
        └── reducers
        |   └── demo.js
        |   └── todo.js
        └── sagas
            └── demo.js
            └── todo.js
  

• constant

  ./constants/demo.js

    // dispatch to saga from hook
    export const ACTION_DEMO_ADD = "ACTION_DEMO_ADD";
  
    // dispatch to redux from saga 'put' effect
    export const ACTION_DEMO_ADD_SUC = "ACTION_DEMO_ADD_SUC";
  

• redux-saga

  ./redux/sagas/demo.js : watch saga dispacth.

    import { takeEvery, put, select } from "redux-saga/effects";
    import { ACTION_DEMO_ADD, ACTION_DEMO_ADD_SUC } from "../../constants/demo";
  
    let counter = 0;
  
    function* add({ text }) {
        const { items } = yield select(state => state.demo)
        yield put({
            type: ACTION_DEMO_ADD_SUC,
            payload: [...items, {
                text,
                id: counter++
            }]
        })
    }
  
    export default [
        takeEvery(ACTION_DEMO_ADD, add)
    ]
  

  ./redux/sagas/index.js : export all sagas to watch at the same time.

    import { all } from "redux-saga/effects"
    import demo from "./demo" // remove this in your app
  
    export default function* rootSaga() {
        yield all([...demo])
    }
  

• reducer

  ./redux/reducers/demo.js : watch saga's ‘put' effect to call reducer with preprocessed data

    import produce from "immer";
    import { ACTION_DEMO_ADD_SUC } from "../../constants/demo";
    const initialState = {
        items: []
    }
  
    const todo = (state = initialState, action) => produce(state, draft => {
        switch (action.type) {
            case ACTION_DEMO_ADD_SUC:
                draft.items = action.payload;
                break
            default:
                break
        }
    })
  
    export default todo;
  

  ./redux/reducers/index.js : watch all actions includes sagas' put effect and original redux dispatch

    import { combineReducers } from "redux";
    import demo from "./demo"
  
    const rootReducer = combineReducers({
        demo
    })
  
    export default rootReducer;
  

• action

  ./redux/actions/demo.js : funtion use to dispatch saga or redux depends on type

    import { ACTION_DEMO_ADD } from "../../constants/demo";
  
    export const demo = (text) => {
        return {
            type: ACTION_DEMO_ADD,
            text
        }
    }
  

• store with saga

  ./config/configureStore.js

    import { createStore, applyMiddleware } from "redux";
    import createSagaMiddleware from "redux-saga";
  
    import rootReducer from "../redux/reducers";
    import rootSaga from "../redux/sagas";
  
    const sagaMiddleware = createSagaMiddleware();
  
    export default createStore(rootReducer, applyMiddleware(sagaMiddleware));
  
    sagaMiddleware.run(rootSaga);
  

• use store in app

  ./pages/_app.js : use provider with store

    import { Provider } from "react-redux";
    import store from "../config/configureStore";
  
    function MyApp({ Component, pageProps }) {
      return (
        <Provider store={store}>
          <Component {...pageProps} />
        </Provider>
      )
    }
      
    export default MyApp
  

• add page for testing pages/demo-redux-saga.js and visit http://localhost:3000/demo-redux-saga

    import { useState } from "react"
    import { useSelector, useDispatch } from "react-redux"
    import { demo } from "../redux/actions/demo"
  
    const TextInput = () => {
        const [text, setText] = useState("")
        const items = useSelector(state => state.demo)
        const dispatch = useDispatch()
  
        const onChange = (e) => {
            setText(e.target.value)
        }
  
        const onClick = () => {
            dispatch(demo(text))
            setText("")
        }
  
        return <>
            <pre>{JSON.stringify(items, null, 4)}</pre>
            <input type="text" value={text} onChange={onChange} />
            <button onClick={onClick}>add</button>
        </>
    }
  
    export default function App(){
        return <TextInput/>
    }
  

Flow chart of Load data

Tips

• dispatch another saga event in saga, use yield call(eventFunction) instead of yield put({type:EVENT_CONSTANT})

Advanced

WebSocket

• Reference

import { take, call, race } from "redux-saga/effects";
import { eventChannel, END } from "redux-saga";

function initWebsocketChannel(socketUrl) {

  return eventChannel((emitter) => {
    const socket = new WebSocket(socketUrl);

    socket.onopen = () => {
        emitter({type:SOCKET_CONNECTED,payload:{}});
    };

    socket.onclose = () => {
        emitter({type:SOCKET_CLOSED,payload:{}});
        emitter(END);
    };

    socket.onmessage = (payload) => {
        emitter({type:SOCKET_MSG,payload});
    };

    return () => socket.close();
  });
}

function* initWebSocket() {
    const socketUrl="wss://..."
    const channel = yield call(initWebsocketChannel, socketUrl);

    while (true) {
        const action = yield race([take(channel), take([CLOSE_SOCKET])]);

        const socketAction = action[0];
        if (socketAction) {
            yield put(socketAction);
        }

        const closeAction = action[1];
        if (closeAction) {
            channel.close();
            break;
        }
    }
}