npx create-react-app todo-react --template typescript
cd todo-react

interface Task {
  id: number;
  text: string;
  completed: boolean;
}

export const TaskList = () => {
  const [tasks, setTasks] = useState<Task[]>([]);
  
  const addTask = (text: string) => {
    setTasks([...tasks, { id: Date.now(), text, completed: false }]);
  };

  return (
    <div className="task-manager">
      <TaskInput onAdd={addTask} />
      <ul className="task-list">
        {tasks.map(task => (
          <TaskItem key={task.id} task={task} />
        ))}
      </ul>
    </div>
  );
};

npm start

npm install @reduxjs/toolkit react-redux

import { createSlice, PayloadAction } from '@reduxjs/toolkit';

interface Task {
  id: string;
  text: string;
  completed: boolean;
}

const initialState: Task[] = [];

export const tasksSlice = createSlice({
  name: 'tasks',
  initialState,
  reducers: {
    addTask: (state, action: PayloadAction<string>) => {
      state.push({
        id: Date.now().toString(),
        text: action.payload,
        completed: false
      });
    },
    toggleTask: (state, action: PayloadAction<string>) => {
      const task = state.find(t => t.id === action.payload);
      if (task) task.completed = !task.completed;
    }
  }
});

export const { addTask, toggleTask } = tasksSlice.actions;
export default tasksSlice.reducer;

import { configureStore } from '@reduxjs/toolkit';
import tasksReducer from '../features/tasks/tasksSlice';

export const store = configureStore({
  reducer: {
    tasks: tasksReducer
  }
});

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

import { Provider } from 'react-redux';
import { store } from './app/store';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

import { useAppDispatch, useAppSelector } from '../app/hooks';
import { addTask, toggleTask } from './tasksSlice';

export const TaskList = () => {
  const tasks = useAppSelector(state => state.tasks);
  const dispatch = useAppDispatch();
  
  const handleAdd = (text: string) => dispatch(addTask(text));
  const handleToggle = (id: string) => dispatch(toggleTask(id));
  
  return (
    /* JSX с использованием tasks и handlers */
  );
};

import { Task } from './tasksSlice';

const API_URL = 'https://your-api.com/tasks';

export const fetchTasks = async (): Promise<Task[]> => {
  const response = await fetch(API_URL);
  return await response.json();
};

export const saveTask = async (task: Task): Promise<Task> => {
  const response = await fetch(API_URL, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(task)
  });
  return await response.json();
};

import { createAsyncThunk } from '@reduxjs/toolkit';
import { fetchTasks, saveTask } from './tasksAPI';

export const loadTasks = createAsyncThunk('tasks/load', async () => {
  return await fetchTasks();
});

export const addTaskAsync = createAsyncThunk(
  'tasks/add',
  async (text: string) => {
    const newTask = { text, completed: false };
    return await saveTask(newTask);
  }
);

const tasksSlice = createSlice({
  // ...существующие reducers
  extraReducers: (builder) => {
    builder
      .addCase(loadTasks.fulfilled, (state, action) => {
        return action.payload;
      })
      .addCase(addTaskAsync.fulfilled, (state, action) => {
        state.push(action.payload);
      });
  }
});

import { loadTasks, addTaskAsync } from './tasksSlice';

export const TaskList = () => {
  const dispatch = useAppDispatch();
  const { loading, error } = useAppSelector(state => state.tasks.meta);

  useEffect(() => {
    dispatch(loadTasks());
  }, []);

  const handleAdd = (text: string) => {
    dispatch(addTaskAsync(text));
  };

  if (loading) return <Spinner />;
  if (error) return <ErrorAlert message={error} />;

  return ( /* ... */ );
};

npm install jest @types/jest @testing-library/react redux-mock-store --save-dev

module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'jsdom',
  setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect']
};

import tasksReducer, { addTask, toggleTask } from './tasksSlice';

describe('tasks reducer', () => {
  it('should handle initial state', () => {
    expect(tasksReducer(undefined, { type: 'unknown' })).toEqual([]);
  });

  it('should handle addTask', () => {
    const actual = tasksReducer([], addTask('New task'));
    expect(actual[0].text).toEqual('New task');
    expect(actual[0].completed).toBe(false);
  });

  it('should handle toggleTask', () => {
    const initialState = [{ id: '1', text: 'Test', completed: false }];
    const actual = tasksReducer(initialState, toggleTask('1'));
    expect(actual[0].completed).toBe(true);
  });
});

import configureMockStore from 'redux-mock-store';
import thunk from 'redux-thunk';
import { loadTasks } from './tasksSlice';

const middlewares = [thunk];
const mockStore = configureMockStore(middlewares);

describe('async thunks', () => {
  it('dispatches fulfilled when loadTasks succeeds', async () => {
    const store = mockStore({});
    await store.dispatch(loadTasks() as any);
    const actions = store.getActions();
    
    expect(actions[0].type).toEqual('tasks/load/pending');
    expect(actions[1].type).toEqual('tasks/load/fulfilled');
  });
});

import { render, screen } from '@testing-library/react';
import { Provider } from 'react-redux';
import { store } from '../../app/store';
import TaskList from './TaskList';

test('renders empty task list', () => {
  render(
    <Provider store={store}>
      <TaskList />
    </Provider>
  );
  
  expect(screen.getByText(/нет задач/i)).toBeInTheDocument();
});

name: Run Tests

on: [push, pull_request]

jobs:
  test:
    runs-on: ubuntu-latest
    
    steps:
    - uses: actions/checkout@v2
    
    - name: Setup Node
      uses: actions/setup-node@v2
      with:
        node-version: '16'
    
    - name: Install dependencies
      run: npm ci
      
    - name: Run tests
      run: npm test -- --coverage
      
    - name: Upload coverage
      uses: codecov/codecov-action@v1

{
  "scripts": {
    "test": "jest",
    "test:watch": "jest --watch",
    "test:coverage": "jest --coverage"
  }
}

deploy:
  needs: test
  runs-on: ubuntu-latest
  steps:
    - uses: actions/checkout@v2
    - run: npm run build
    
    - name: Deploy to Vercel
      uses: amondnet/vercel-action@v20
      with:
        vercel-token: ${{ secrets.VERCEL_TOKEN }}
        vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
        vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}