zustand-saga

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);
  }, []);
 
  ...
}