GitHub

  • Redux Saga Router can also work in tandem with React Router!
  • Redux Saga Router comes equipped with a router saga and two history strategies, createBrowserHistory and createHashHistory .
  • The router saga expects a history object and a routes object with key-value pairs of route paths to other sagas (or just functions).
  • Instead of using one of Redux Saga Router’s history creation functions, just use your history object from React Router.
  • Redux Saga Router gives you a saga for handling clientside routes in your Redux Saga application.

redux-saga-router – A router for Redux Saga

@elpapapollo: Introducing Redux Saga Router for handling routes with Redux Saga!

#javascript #redux #reactjs

Redux Saga Router gives you a saga for handling clientside routes in your Redux Saga application. This affords you a perfect way to manage side effects or dispatch Redux actions in response to route changes.

saga expects a history object and a routes object with key-value pairs of route paths to other sagas (or just functions).

uses (you guessed it) hashes, which is perfect for older browsers. These two history creation functions in fact come from the history library.

// saga.js // ES2015 import { router, createBrowserHistory } from ‘redux-saga-router’; // Or CJS const rsr = require(‘redux-saga-router’); const router = rsr.router; const createBrowserHistory = rsr.createBrowserHistory; const history = createBrowserHistory(); const routes = { // Method syntax * ‘/users'() { const users = yield call(fetchUsers); yield put(setUsers(users)); }, // Or long form with function expression ‘ /users/:id ‘ : function * userSaga({ id }) { const user = yield call(fetchUser, id); yield put(setCurrentUser(user)); }, }; function * mainSaga() { const data = yield call(fetchInitialData); yield put(ready(data)); yield * router(history, routes); }

If you use hash history, then navigation will work right out of the box.

import { router, createHashHistory } from ‘redux-saga-router’; const history = createHashHistory(); const routes = { // … }; function * mainSaga() { const data = yield call(fetchInitialData); yield put(ready(data)); yield * router(history, routes); }

changes, so you’ll need a method for making anchor tags change history state instead of actually exhibiting their default behavior. Also, if you’re building a single-page application, your server will need to support your client side routes to ensure your app loads properly.

import { router, createBrowserHistory } from ‘redux-saga-router’; const history = createBrowserHistory(); // This is a naive example, so you might want something more robust document.addEventListener(‘click’, (e) => { const el = e.target; if (el.tagName === ‘A’) { e.preventDefault(); history.push(el.pathname); } }); const routes = { // … }; function * mainSaga() { // … }

component.

// history.js import { createBrowserHistory } from ‘redux-saga-router’; import { createLink } from ‘redux-saga-router/react’ const history = createBrowserHistory(); export const Link = createLink(history); export { history };

// saga.js import { router } from ‘redux-saga-router’; import { history } from ‘./history’; const routes = { // … }; function * mainSaga() { const data = yield call(fetchInitialData); yield put(ready(data)); yield * router(history, routes); }

// App.js import React from ‘react’; import { Link } from ‘./history’; export default function App() { return (

); }

Redux Saga Router can also work in tandem with React Router! Instead of using one of Redux Saga Router’s history creation functions, just use your history object from React Router.

NOTE: examples below are for React Router v2/3 for now.

// saga.js import { router } from ‘redux-saga-router’; import { browserHistory as history } from ‘react-router’; const routes = { // … }; export default function * mainSaga() { const data = yield call(fetchInitialData); yield put(ready(data)); yield * router(history, routes); }

// App.js import React from ‘react’; import { Link } from ‘react-router’; export default function App({ children }) { return (

{ children }

); }

import React from ‘react’; import { render } from ‘react-dom’; import { applyMiddleware, createStore } from ‘redux’; import createSagaMiddleware from ‘redux-saga’; import { Router, Route, browserHistory as history } from ‘react-router’; import App from ‘./App’; import Users from ‘./Users’; import User from ‘./User’; import mainSaga from ‘./saga’; function reducer() { return {}; } const sagaMiddleware = createSagaMiddleware(); const store = createStore(reducer, applyMiddleware(sagaMiddleware)); sagaMiddleware . run(mainSaga); render(( ), document . getElementById(‘main’));

GitHub