export const FETCH_POSTS_REQUEST = 'FETCH_POSTS_REQUEST';
export const FETCH_POSTS_SUCCESS = 'FETCH_POSTS_SUCCESS';
export const FETCH_POSTS_FAILURE = 'FETCH_POSTS_FAILURE';

export const CREATE_POST_REQUEST = 'CREATE_POST_REQUEST';
export const CREATE_POST_SUCCESS = 'CREATE_POST_SUCCESS';
export const CREATE_POST_FAILURE = 'CREATE_POST_FAILURE';

export const UPDATE_POST_REQUEST = 'UPDATE_POST_REQUEST';
export const UPDATE_POST_SUCCESS = 'UPDATE_POST_SUCCESS';
export const UPDATE_POST_FAILURE = 'UPDATE_POST_FAILURE';

export const DELETE_POST_REQUEST = 'DELETE_POST_REQUEST';
export const DELETE_POST_SUCCESS = 'DELETE_POST_SUCCESS';
export const DELETE_POST_FAILURE = 'DELETE_POST_FAILURE';

export const updatePostRequest = (data: UpdatePostRequestInterface): UpdatePostRequestActionInterface => ({
  type: UPDATE_POST_REQUEST,
  payload: data
});

export const updatePostSuccess = (data: UpdatePostSuccessResponseInterface): UpdatePostSuccessActionInterface => ({
  type: UPDATE_POST_SUCCESS,
  payload: data
});

export const updatePostFailure = (error: string): UpdatePostFailureActionInterface => ({
  type: UPDATE_POST_FAILURE,
  payload: {
    message: error
  },
});

export const createPostRequest = (data: CreatePostRequestInterface): CreatePostRequestActionInterface => ({
  type: CREATE_POST_REQUEST,
  payload: data
});

export const createPostSuccess = (data: CreatePostSuccessResponseInterface): CreatePostSuccessActionInterface => ({
  type: CREATE_POST_SUCCESS,
  payload: data
});

export const createPostFailure = (error: string): CreatePostFailureActionInterface => ({
  type: CREATE_POST_FAILURE,
  payload: {
    message: error
  },
});

export const deletePostRequest = (data: DeletePostRequestInterface): DeletePostRequestActionInterface => ({
  type: DELETE_POST_REQUEST,
  payload: data
});

export const deletePostSuccess = (data: {}): DeletePostSuccessActionInterface => ({
  type: DELETE_POST_SUCCESS,
  payload: data
});

export const deletePostFailure = (error: string): DeletePostFailureActionInterface => ({
  type: DELETE_POST_FAILURE,
  payload: {
    message: error
  },
});

export const fetchPostsRequest = (): FetchPostsRequestActionInterface => ({
  type: FETCH_POSTS_REQUEST,
});

export const fetchPostsSuccess = (data: FetchPostsSuccessResponseInterface): FetchPostsSuccessActionInterface => ({
  type: FETCH_POSTS_SUCCESS,
  payload: data,
});

export const fetchPostsFailure = (error: string): FetchPostsFailureActionInterface => ({
  type: FETCH_POSTS_FAILURE,
  payload: {
    message: error
  },
});

const initialState: PostsState = {
  posts: [],
  successMessage: null,
  isLoading: false,
  error: null,
};

export const postsReducer = (state = initialState, action: PostsActions) => {
  switch (action.type) {
    case FETCH_POSTS_REQUEST:
      return {
        ...state,
        isLoading: true,
        successMessage: null,
        error: null,
      };
    case FETCH_POSTS_SUCCESS:
      return {
        ...state,
        isLoading: false,
        posts: action.payload
      };
    case FETCH_POSTS_FAILURE:
      return {
        ...state,
        isLoading: false,
        error: action.payload.message
      };
    case CREATE_POST_REQUEST:
      return {
        ...state,
        isLoading: true,
        successMessage: null,
        error: null,
      };
    case CREATE_POST_SUCCESS:
      return {
        ...state,
        isLoading: false,
        posts: [ action.payload, ...state.posts ],
        successMessage: 'Post created!'
      };
    case CREATE_POST_FAILURE:
      return {
        ...state,
        isLoading: false,
        successMessage: null,
        error: 'Post was not created',
      };
    case UPDATE_POST_REQUEST:
      return {
        ...state,
        isLoading: true,
        successMessage: null,
        error: null,
      };
    case UPDATE_POST_SUCCESS:
      return {
        ...state,
        isLoading: false,
        posts: state.posts.map(p => p.id === action.payload.id ? action.payload : p) as PostType[],
        successMessage: 'Post updated!',
        error: null
      };
    case UPDATE_POST_FAILURE:
      return {
        ...state,
        isLoading: false,
        successMessage: null,
        error: 'Post was not updated',
      };
    case DELETE_POST_REQUEST:
      return {
        ...state,
        isLoading: true,
        successMessage: null,
        error: null,
      };
    case DELETE_POST_SUCCESS:
      return {
        ...state,
        isLoading: false,
        successMessage: 'Post deleted',
        error: null,
      };
    case DELETE_POST_FAILURE:
      return {
        ...state,
        isLoading: false,
        successMessage: null,
        error: 'Post was not deleted',
      };
    default:
      return state;
  }
};

export default postsReducer;

export interface RootState {
  posts: PostsState;
}

const rootReducer = combineReducers<RootState>({
  posts: postsReducer
});

export default rootReducer;

Для удобства я оставляю интерфейс RootState сверху.

Функция combineReducers принимает объект, где ключи представляют различные срезы состояния, а значения — соответствующие редюсеры.

function* updatePostWorker(action: Action<typeof UPDATE_POST_REQUEST> & UpdatePostRequestActionInterface): Generator {
  try {
    const data = action.payload;
    const response = (yield call(updatePostRequest, data)) as UpdatePostSuccessResponseInterface;
    yield put(updatePostSuccess(response));
    // yield put(fetchPostsRequest());
  } catch (error) {
    yield put(updatePostFailure('error update post'));
  }
}

function* createPostWorker(action: Action<typeof CREATE_POST_REQUEST> & CreatePostRequestActionInterface): Generator {
  try {
    const data = action.payload;
    const response = (yield call(createPostRequest, data)) as CreatePostSuccessResponseInterface;
    yield put(createPostSuccess(response));
    // yield put(fetchPostsRequest());
  } catch (error) {
    yield put(createPostFailure('error create post'));
  }
}

function* deletePostWorker(action: Action<typeof DELETE_POST_REQUEST> & DeletePostRequestActionInterface): Generator {
  try {
    const { id } = action.payload;
    const response = (yield call(deletePostRequest, id)) as {};
    yield put(deletePostSuccess(response));
    yield put(fetchPostsRequest());
  } catch (error) {
    yield put(deletePostFailure('error delete post'));
  }
}

function* fetchPostsWorker(action: Action<typeof FETCH_POSTS_REQUEST> & FetchPostsRequestActionInterface): Generator {
  try {
    const response = (yield call(getPostsRequest)) as FetchPostsSuccessResponseInterface;
    yield put(fetchPostsSuccess(response));
  } catch (error) {
    yield put(fetchPostsFailure('error fetch posts'));
  }
}

export function* postsSagaWatcher(): Generator {
  yield takeLatest(FETCH_POSTS_REQUEST, fetchPostsWorker);
  yield takeLatest(DELETE_POST_REQUEST, deletePostWorker);
  yield takeLatest(CREATE_POST_REQUEST, createPostWorker);
  yield takeLatest(UPDATE_POST_REQUEST, updatePostWorker);
}

call эффект, который используется для вызова функции.

put эффект используется для отправки (dispatch) действий в Redux store.

function* rootSaga() {
  yield all([ fork(postsSagaWatcher) ]);
}

export default rootSaga;

функция fork используется для создания неблокирующих вызовов, то есть postsSagaWatcher будет запущена, но не будет блокировать выполнение других саг или эффектов, запущенных через all.

const sagaMiddleware = createSagaMiddleware();

const composeEnhancers = (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

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

sagaMiddleware.run(rootSaga);

export default store;

sagaMiddleware: создает экземпляр middleware саги, используя функцию createSagaMiddleware. Впоследствии он запускается через run и начинает отслеживать действия.

Enhancers - это усилители хранилища, в контексте данной практики усилителем является middleware, но также есть и другие усилители. (вот кстати старенькая статья об этом и как что под капотом).

applyMiddleware принимает массив middleware функций, а возвращает функцию усилитель (в коде createStore она была параметром enhance).

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

const postsApi = axios.create({
  baseURL: 'https://jsonplaceholder.typicode.com/',
});

export const getPostsRequest = async () => {
  const response = await postsApi.get('posts');
  return response.data;
}

export const deletePostRequest = async (id: number) => {
  const response = await postsApi.delete(`posts/${ id }`);
  return response.data;
}

export const createPostRequest = async (data: CreatePostRequestInterface) => {
  const response = await postsApi.post(`/posts`, data, {
    headers: {
      'Content-Type': 'application/json'
    }
  });
  return response.data;
}

export const updatePostRequest = async (data: UpdatePostRequestInterface) => {
  const response = await postsApi.put(`/posts/${ data.postId }`, data, {
    headers: {
      'Content-Type': 'application/json'
    }
  });
  return response.data;
}

в первых строках создается экземпляр со своей конфигурацией, вместо того, чтобы к каждому запросу дублировать url.

далее создаются и экспортируются запросы

1. async: используется перед объявлением функции, которое указывает, что функция является асинхронной. Асинхронные функции всегда возвращают Promise, даже если внутри них нет явного возврата промиса.

2. await: используется внутри асинхронной функции и оно "приостанавливает" выполнение функции до тех пор, пока промис (в данном случае результат работы postsApi.get('posts')) не будет выполнен. Когда промис завершается, await возвращает результат промиса, и выполнение функции продолжается

export interface PostOperationInterface {
  userId: number;
  title: string;
  body: string;
}

export interface CreatePostRequestInterface extends PostOperationInterface {
}

export interface DeletePostRequestInterface {
  id: number;
}

export interface UpdatePostRequestInterface extends PostOperationInterface {
  postId: number;
}

export interface PostType {
  id: number;
  userId: number;
  title: string;
  body: string;
}

export interface FetchPostsSuccessResponseInterface extends Array<PostType> {
}

export interface PostsFailureResponseInterface {
  message: string;
}

export interface CreatePostSuccessResponseInterface extends PostType {
}

export interface UpdatePostSuccessResponseInterface extends PostType {
}

// Get
export interface FetchPostsRequestActionInterface extends Action<typeof FETCH_POSTS_REQUEST> {
  type: typeof FETCH_POSTS_REQUEST;
}

export interface FetchPostsSuccessActionInterface extends Action<typeof FETCH_POSTS_SUCCESS> {
  type: typeof FETCH_POSTS_SUCCESS;
  payload: FetchPostsSuccessResponseInterface;
}

export interface FetchPostsFailureActionInterface extends Action<typeof FETCH_POSTS_FAILURE> {
  type: typeof FETCH_POSTS_FAILURE;
  payload: PostsFailureResponseInterface;
}

//Delete
export interface DeletePostRequestActionInterface extends Action<typeof DELETE_POST_REQUEST> {
  type: typeof DELETE_POST_REQUEST;
  payload: DeletePostRequestInterface
}

export interface DeletePostSuccessActionInterface extends Action<typeof DELETE_POST_SUCCESS> {
  type: typeof DELETE_POST_SUCCESS;
  payload: {}
}

export interface DeletePostFailureActionInterface extends Action<typeof DELETE_POST_FAILURE> {
  type: typeof DELETE_POST_FAILURE;
  payload: PostsFailureResponseInterface
}

//Create
export interface CreatePostRequestActionInterface extends Action<typeof CREATE_POST_REQUEST> {
  type: typeof CREATE_POST_REQUEST;
  payload: CreatePostRequestInterface
}

export interface CreatePostSuccessActionInterface extends Action<typeof CREATE_POST_SUCCESS> {
  type: typeof CREATE_POST_SUCCESS;
  payload: CreatePostSuccessResponseInterface
}

export interface CreatePostFailureActionInterface extends Action<typeof CREATE_POST_FAILURE> {
  type: typeof CREATE_POST_FAILURE;
  payload: PostsFailureResponseInterface
}

//Update
export interface UpdatePostRequestActionInterface extends Action<typeof UPDATE_POST_REQUEST> {
  type: typeof UPDATE_POST_REQUEST;
  payload: UpdatePostRequestInterface
}

export interface UpdatePostSuccessActionInterface extends Action<typeof UPDATE_POST_SUCCESS> {
  type: typeof UPDATE_POST_SUCCESS;
  payload: UpdatePostSuccessResponseInterface
}

export interface UpdatePostFailureActionInterface extends Action<typeof UPDATE_POST_FAILURE> {
  type: typeof UPDATE_POST_FAILURE;
  payload: PostsFailureResponseInterface
}

export type PostsActions =
  CreatePostRequestActionInterface
  | CreatePostFailureActionInterface
  | CreatePostSuccessActionInterface
  | UpdatePostRequestActionInterface
  | UpdatePostFailureActionInterface
  | UpdatePostSuccessActionInterface
  | DeletePostRequestActionInterface
  | DeletePostFailureActionInterface
  | DeletePostSuccessActionInterface
  | FetchPostsRequestActionInterface
  | FetchPostsSuccessActionInterface
  | FetchPostsFailureActionInterface
  ;

export interface PostsState {
  posts: PostType[];
  successMessage: string | null,
  isLoading: boolean;
  error: string | null;
}