有没有办法强类型 sagas put 动作？答案

【问题标题】：Is there a way to strongly type sagas put actions?有没有办法强类型 sagas put 动作？
【发布时间】：2019-09-02 16:06:33
【问题描述】：

在redux-thunk中我们可以定义actions的类型可以是dispatch

enum MoviesTypes {
  ADD_MOVIES = 'ADD_MOVIES',
}

interface AddMoviesAction {
  type: typeof MoviesTypes.ADD_MOVIES;
  movies: MovieShowcase[];
}

type MoviesActionTypes = 
  | AddMoviesAction;

const addMovies = (movies: MovieShowcase[]): MoviesActionTypes => ({
  type: MoviesTypes.ADD_MOVIES,
  movies,
});

// ThunkAction<any, any, any, MoviesActionTypes> <---
// dispatch only actions inside MoviesActionTypes
const fetchNextPage = (
  page: number
): ThunkAction<Promise<void>, {}, {}, MoviesActionTypes> => async (dispatch) => {
  dispatch({ type: 'BAD_TYPE' }); // error
  dispatch({ type: MoviesTypes.ADD_MOVIES, movies: [] }); // good
};

是否可以在 saga 上做同样的事情？

我怎么能严格地说我们只能在 MoviesActionTypes 内部调用 put？

function* fetchMovies({ page }: FetchMoviesAction) {
  yield put({ type: MoviesTypes.ADD_MOVIES, movies: [] }); // good
  yield put({ type: 'BAD_TYPE' }); // good
}

function* watchFetchMovies() {
  yield takeEvery(MoviesTypes.FETCH_MOVIES, fetchMovies);
}

【问题讨论】：

标签： typescript redux react-redux redux-saga

【解决方案1】：

put 是通用的：

export function put<A extends Action>(action: A): PutEffect<A>

所以只需编写一个受限于您应用的操作类型的put 版本：

import {
  put as putUntyped,
} from "redux-saga/effects";

export const put = <A extends FetchMoviesAction>(action: A): PutEffect<A> =>
  putUntyped(action);

然后在你会使用 put 的任何地方使用它：

import { put } from "...";

yield put({ type: MoviesTypes.ADD_MOVIES, movies: [] });

【讨论】：