3.3 Kết nối store redux-thunk (ok)

C:\Users\Administrator\Desktop\start\src\index.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import "./index.css";
import { Provider } from 'react-redux';
import { store } from './store';
ReactDOM.render(
  <React.StrictMode>
  	<Provider store={store}>
    	<App />
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

C:\Users\Administrator\Desktop\start\src\store\index.tsx

import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './../reducer';
const composeEnhancers = typeof window === 'object' && process.env.NODE_ENV === 'development' && (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ? (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({}) : compose;
const enhancer = composeEnhancers(applyMiddleware(thunk));
export const store = createStore(rootReducer, enhancer);

C:\Users\Administrator\Desktop\start\src\reducer\index.tsx

import { combineReducers } from 'redux';
import { AppReducer } from './app';
const rootReducer = combineReducers({
  app: AppReducer
})
export default rootReducer;

C:\Users\Administrator\Desktop\start\src\routes\index.tsx

import React from 'react';
import { BrowserRouter as Router } from 'react-router-dom';
import HomeRoutes from './HomeRoutes';
import LoginRoutes from './LoginRoutes';
function Routes() {
  return (
    <Router>
      <HomeRoutes />
      <LoginRoutes />
    </Router>
  )
}
export default Routes;

C:\Users\Administrator\Desktop\start\src\routes\HomeRoutes.tsx

import React from 'react';
import Home from './../pages/Home';
function HomeRoutes() {
  return (
    <div>
      <Home />
    </div>
  )
}
export default HomeRoutes;

C:\Users\Administrator\Desktop\start\src\routes\LoginRoutes.tsx

import React from 'react';
import { Route, Switch } from 'react-router-dom';
import { PATH } from './../constants/paths';
import Login from './../pages/Login';
function LoginRoutes() {
  return (
    <Switch>
      <Route path={PATH.LOGIN} component={Login} />
    </Switch>
  )
}
export default LoginRoutes;

C:\Users\Administrator\Desktop\start\src\constants\paths.tsx

export const PATH = {
  HOME: '/',
  PRODUCT: '/product',
  LOGIN: '/login'
}

C:\Users\Administrator\Desktop\start\src\pages\Home\index.tsx

import React from "react";
export default function Home() {
  return (
    <div>
      <h2 className="mb-4">Home</h2>
    </div>
  )
}

C:\Users\Administrator\Desktop\start\src\reducer\app.tsx

import * as types from './../constants/login';
import produce from 'immer';
const initialState = {
  isAuthenticated: false
}
export const AppReducer = (state = initialState, action:any) =>
produce(state, draft => {
  switch (action.type) {
    case types.LOGOUT:
      localStorage.removeItem('token')
      draft.isAuthenticated = false
      break
    case types.LOGIN_SUCCESS:
      draft.isAuthenticated = true
      break
    default:
      return state
  }
})