Hướng dẫn sử dụng Redux Toolkit và Redux Saga trong dự án React

yarn add @reduxjs/toolkit react-redux

import { configureStore } from '@reduxjs/toolkit';

// Chúng ta sẽ thêm reducer sau
const store = configureStore({
  reducer: {},  // placeholder
});

export default store;

// Các kiểu dữ liệu để sử dụng trong hooks
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

// src/index.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import App from './App';
import store from './store'; // import store

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}> {/* Kết nối store tới React */}
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

// src/features/user/userSlice.ts
import { createSlice, PayloadAction } from '@reduxjs/toolkit';

interface UserState {
  name: string;
  age: number;
}

const initialState: UserState = {
  name: '',
  age: 0,
};

const userSlice = createSlice({
  name: 'user',
  initialState,
  reducers: {
    updateUser: (state, action: PayloadAction<{ name: string; age: number }>) => {
      // Cập nhật state user
      state.name = action.payload.name;
      state.age = action.payload.age;
    },
  },
});

export const { updateUser } = userSlice.actions;
export default userSlice.reducer;

// src/store.ts
import { configureStore } from '@reduxjs/toolkit';
import userReducer from './features/user/userSlice';

const store = configureStore({
  reducer: {
    user: userReducer,
  },
});

export default store;
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

// src/features/user/userSlice.ts
import { createSlice, PayloadAction, createAsyncThunk } from '@reduxjs/toolkit';

interface UserState {
  name: string;
  age: number;
  status: 'idle' | 'loading' | 'succeeded' | 'failed';
}

const initialState: UserState = {
  name: '',
  age: 0,
  status: 'idle',
};

// Tạo async thunk để fetch user
export const fetchUser = createAsyncThunk(
  'user/fetchUser',
  async (userId: number) => {
    const response = await fetch(`https://api.example.com/users/${userId}`);
    return (await response.json()) as { name: string; age: number };
  }
);

const userSlice = createSlice({
  name: 'user',
  initialState,
  reducers: {
    updateUser: (state, action: PayloadAction<{ name: string; age: number }>) => {
      state.name = action.payload.name;
      state.age = action.payload.age;
    },
  },
  extraReducers: (builder) => {
    builder
      .addCase(fetchUser.pending, (state) => {
        state.status = 'loading';
      })
      .addCase(fetchUser.fulfilled, (state, action) => {
        state.status = 'succeeded';
        state.name = action.payload.name;
        state.age = action.payload.age;
      })
      .addCase(fetchUser.rejected, (state) => {
        state.status = 'failed';
      });
  },
});

export const { updateUser } = userSlice.actions;
export default userSlice.reducer;

// src/App.tsx
import React, { useState } from 'react';
import { useAppDispatch, useAppSelector } from './hooks';
import { updateUser, fetchUser } from './features/user/userSlice';

function App() {
  const dispatch = useAppDispatch();
  const user = useAppSelector((state) => state.user);
  const [userId, setUserId] = useState(1);

  return (
    <div>
      <h1>User Info</h1>
      <p>Name: {user.name}</p>
      <p>Age: {user.age}</p>
      <p>Status: {user.status}</p>

      <button onClick={() => dispatch(updateUser({ name: 'Alice', age: 25 }))}>
        Update User
      </button>

      <div>
        <input 
          type="number" 
          value={userId} 
          onChange={(e) => setUserId(Number(e.target.value))} 
        />
        <button onClick={() => dispatch(fetchUser(userId))}>
          Fetch User
        </button>
      </div>
    </div>
  );
}

export default App;

// src/hooks.ts
import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';
import type { RootState, AppDispatch } from './store';

// Tạo typed hook dùng cho dispatch và selector
export const useAppDispatch = () => useDispatch<AppDispatch>();
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

yarn add redux react-redux redux-saga

// src/store.ts
import { createStore, applyMiddleware, combineReducers } from 'redux';
import createSagaMiddleware from 'redux-saga';
import userReducer from './features/user/userReducer';
import rootSaga from './rootSaga';

const sagaMiddleware = createSagaMiddleware();

const rootReducer = combineReducers({
  user: userReducer,
});

const store = createStore(rootReducer, applyMiddleware(sagaMiddleware));

sagaMiddleware.run(rootSaga);

export default store;

// src/features/user/userSaga.ts
import { call, put, takeLatest } from 'redux-saga/effects';
import { fetchUserSuccess, fetchUserFailure } from './userActions';

// giả lập gọi API
function fetchUserFromApi(userId: number) {
  return fetch(`https://api.example.com/users/${userId}`).then(response =>
    response.json()
  );
}

function* fetchUser(action: { type: string; payload: number }) {
  try {
    const userData = yield call(fetchUserFromApi, action.payload);
    yield put(fetchUserSuccess(userData));
  } catch (e) {
    yield put(fetchUserFailure('Failed to fetch user'));
  }
}

function* userSaga() {
  yield takeLatest('FETCH_USER_REQUEST', fetchUser);
}

export default userSaga;

// src/features/user/userActions.ts
export const fetchUserRequest = (userId: number) => ({
  type: 'FETCH_USER_REQUEST',
  payload: userId,
});

export const fetchUserSuccess = (userData: { name: string; age: number }) => ({
  type: 'FETCH_USER_SUCCESS',
  payload: userData,
});

export const fetchUserFailure = (error: string) => ({
  type: 'FETCH_USER_FAILURE',
  payload: error,
});

// src/features/user/userReducer.ts
interface UserState {
  name: string;
  age: number;
  loading: boolean;
  error: string | null;
}

const initialState: UserState = {
  name: '',
  age: 0,
  loading: false,
  error: null,
};

function userReducer(state = initialState, action: any): UserState {
  switch (action.type) {
    case 'FETCH_USER_REQUEST':
      return { ...state, loading: true, error: null };
    case 'FETCH_USER_SUCCESS':
      return { ...state, loading: false, ...action.payload };
    case 'FETCH_USER_FAILURE':
      return { ...state, loading: false, error: action.payload };
    default:
      return state;
  }
}

export default userReducer;

// src/App.tsx
import React, { useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { fetchUserRequest } from './features/user/userActions';
import { RootState } from './store';

function App() {
  const dispatch = useDispatch();
  const user = useSelector((state: RootState) => state.user);
  const [userId, setUserId] = useState(1);

  const handleFetchUser = () => {
    dispatch(fetchUserRequest(userId));
  };

  return (
    <div>
      <h1>User Info</h1>
      {user.loading ? <p>Loading...</p> : user.error ? <p>{user.error}</p> : (
        <>
          <p>Name: {user.name}</p>
          <p>Age: {user.age}</p>
        </>
      )}
      <input
        type="number"
        value={userId}
        onChange={(e) => setUserId(Number(e.target.value))}
      />
      <button onClick={handleFetchUser}>Fetch User</button>
    </div>
  );
}

export default App;