redux-rocketjump

redux-rocketjump

Rocketjump your redux! Speed up redux-app development.

A set of tools to speed up the development of a redux based app:

• generate all you need from and for the state from a single function call, easy to extend, easy to compose.
• an out of the box way to organize redux folders by functionality instead of type.
• handy helpers to help you compose functionality.

Quick start

Install

yarn add redux redux-saga reselect redux-rocketjump

Your first rocket jump!

// (1) Define your customary fetching logic
function loadTodosFromApi(params) {
  let myHeaders = new Headers();

  let config = {
    method: 'GET',
    headers: new Headers(),
    body: params
  };

  return fetch('https://myawesomehost/api/posts', config)
    .then(response => response.json())
}

// (2) Import rocketjump (rj for friends)
import { rj } from 'redux-rocketjump'
// Main export
// Here we deal with actions, reducers, selectors and sagas that have been created for us
export const {
  // Actions generated by rj
  actions: {
    // This is the function that triggers our fetching logic
    load: loadTodos,
    // This function stops the asynchronous task started with `load` and clears the state
    unload: unloadTods,
  },
  // Selectors generated by rj
  selectors: {
    // Selector used to get the value returned by our fetching logic, when ready
    getData: getTodos,
    // Selector used to detect if our fetch is pending (i.e. the API call is loading)
    isLoading: isLoading,
    // Selector used to get the error with which the last API call failed (if available)
    getError: getTodsError,
  },
  // The generated reducer
  reducer,
  // The generated saga
  saga,
} = rj({
  // Type of our actions
  type: 'GET_TODOS',
  // Piece of state to put data in
  state 'todos',
  // And our fetching logic
  effect: params => loadTodosFromApi(params),
})()

// (3) And then use it in your main file
import { createStore, compose, applyMiddleware, combineReducers } from 'redux'
import createSagaMiddleware from 'redux-saga'
import { makeAppsReducers, makeAppsSaga } from 'redux-rocketjump'
import * as todos from './todos'

// Merge all our application parts
const APPS = {
  todos
}

// Create root reducer
const rootReducer = combineReducers({
  ...makeAppsReducers(APPS),
})

// Create main saga
const mainSaga = makeAppsSaga(APPS)

// Initialize redux store
const preloadedState = undefined
const sagaMiddleware = createSagaMiddleware()
const store = createStore(
  rootReducer,
  preloadedState,
  compose(
    applyMiddleware(sagaMiddleware),
  )
)

// Start main saga
sagaMiddleware.run(mainSaga)

// Export the created store
export default store

Deep dive

The full documentation with many examples and detailed information is mantained at

https://inmagik.github.io/redux-rocketjump

Be sure to check it out!!

Run example

You can find an example under example, it's a simple REST todo app that uses the great json-server as fake API server.

To run it first clone the repo:

git clone [e-mail]:inmagik/redux-rocketjump.git

Then run:

yarn install
yarn run-example