Lưu ý:

Cùng xem lại sản phẩm của phần 1

Sử dụng Alias

{
  "#api":"/Users/mylap/Desktop/my-app/src/api"
}

// implement theo cách cũ:
import { getLikes } from "../../../api";
import { viewMore } from "../../../helpers";
import { Header, Button, Text } from "../../../components";
import firebase from "../../../firebase";
//Sử dụng alias:
import { getLikes } from "#api";
import { viewMore } from "#helpers";
import { Header, Button, Text } from "#components";
import firebase from "#services/firebase";

// nếu có một alias được implement trong webpack config:
{
   resolve:{
      alias:{
          "#api": path.join(rootPath, "api/"),
      }
   }
}
// thì:
import { getLikes } from "#api";
// tương đương với
import { getLikes } from "/Users/mylap/Desktop/my-app/src/api";

Sử dụng Create-react-app các bạn chạy command yarn eject để bảo CRA chìa ra config để custom, hoặc có một giải pháp an toàn hơn để custom lại config của CRA là sử dụng react-app-rewired.

Implement redux,redux-saga

• Khi data share giữa các pages
• Global state (authentication, user,config ...)
• data tốn nhiều thời gian để fetch, và ít thay đổi theo thời gian
• Cache để tối ưu user experience

• Flow làm việc của bạn sẽ trôi chạy hơn và nhanh hơn vì mọi thứ đều nằm tại page.
• Project structure vừa có thể scale theo chiều ngang hoặc chiều dọc.
• Lazy load reducer

Bugs phần 1:

let routes=[]
const context = require.context(".",true,/route.js$/);
context.keys().forEach((path)=>{
-   routes.push(require(`${path}`).default);
+   routes.push(context(`${path}`).default);
})
export default routes

How about?

function createSagaInjector(runSaga, rootSaga) {
  const injectedSagas = new Map();

  const isInjected = (key) => injectedSagas.has(key);

  const injectSaga = (key, saga) => {
    if (isInjected(key)) return;
    console.log("saga", key, saga);
    const task = runSaga(saga);

    injectedSagas.set(key, task);
  };

  injectSaga("root", rootSaga);

  return injectSaga;
}

const store = createStore(
  createReducer(),
  {},
  compose(
    applyMiddleware(sagaMiddleware),
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
  )
);

store.asyncReducers = {};
store.injectReducer = (key, reducer) => {
  store.asyncReducers[key] = reducer;
  store.replaceReducer(createReducer(store.asyncReducers));
  return store;
};

Kết bài