Nowsta/zustand-saga

Zustand middleware for redux-saga (minus redux)

Use as Zustand middleware and run a saga independent of Redux for a Zustand store. From within the saga, yield the provided setState effect to update the store or the normal Saga select effect to retrieve the store.

import create from 'zustand';
import {takeEvery, select} from 'redux-saga/effects';
import sagaMiddleware, {setState} from 'zustand-saga';

const INCREMENT = 'INCREMENT';

const [useStore] = create(sagaMiddleware(saga, (set, get, store) => ({
  counter: 0,
  increment: amount => store.putActionToSaga({type: INCREMENT, amount}),
})));

function* increment({type, amount}) {
  const counter = yield select(state => state.counter);
  yield setState({counter: counter + amount});
  // or
  yield setState(({counter}) => ({counter: counter + amount}));
}

function* saga() {
  yield takeEvery(INCREMENT, increment);
}

function Component() {
  const increment = useStore(store => store.increment);
  useEffect(() => {
    increment(100);
  }, []);

  ...
}