Notes for React

Some notes for react

㊙️ Fix hot reload

As of the current version(React “^17.0.1”), the hot reloading is not working

  1. Create a file named .env in the root directory(same level with package.json file)
  2. Add this line and save
1
FAST_REFRESH=false

㊙️ Create store with ReduxDevtools

1
2
3
// ver 1
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(reducers, composeEnhancers(applyMiddleware()));
1
2
3
4
5
// ver 2
const store = createStore(
  reducer,
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);

㊙️ Create store with Saga and ReduxDevtools

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// store.js
import { createStore, applyMiddleware, compose } from 'redux';
import createSagaMiddleware from 'redux-saga';
import rootReducer from '../reducers';
import rootSaga from '../sagas/saga';

const composeEnhancers =
  (process.env.NODE_ENV === 'development'
    ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
    : null) || compose;

const sagaMiddlware = createSagaMiddleware();

const store = createStore(
  rootReducer,
  composeEnhancers(applyMiddleware(sagaMiddlware))
);

sagaMiddlware.run(rootSaga);

export default store;

Ref: