React~Workflow Tools - rohit120582sharma/Documentation GitHub Wiki

React Dev Tool

React Developer Tools lets you inspect the React component hierarchy, including component props and state.


Redux Dev Tool

A live-editing time travel environment for Redux.

Features

  • Lets you inspect every state and action payload
  • Lets you go back in time by “cancelling” actions
  • If you change the reducer code, each “staged” action will be re-evaluated
  • If the reducers throw, you will see during which action this happened, and what the error was
  • With persistState() store enhancer, you can persist debug sessions across page reloads

Setup

import { createStore, combineReducers, applyMiddleware, compose } from 'redux';
import createSagaMiddleware from 'redux-saga';

import { formsReducer, constantReducer, watchFormsSaga } from '../../components/Form';

/* -------------------- Combine reducer -------------------- */
const rootReducer = combineReducers({
	forms: formsReducer,
	constants: constantReducer
});

/* -------------------- Create middlewares -------------------- */
const sagaMiddleware = createSagaMiddleware();

/* -------------------- Create Enhancers -------------------- */
let composeEnhancers = compose;
/* eslint-disable no-underscore-dangle */
if(process.env.NODE_ENV === 'development' && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__){
	composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__;
}
/* eslint-enable */

/* -------------------- Create store -------------------- */
const store = createStore(rootReducer, composeEnhancers(applyMiddleware(sagaMiddleware)));

/* -------------------- Run the saga -------------------- */
sagaMiddleware.run(watchFormsSaga);

/* -------------------- Export store -------------------- */
export default store;
⚠️ **GitHub.com Fallback** ⚠️