TypeScript mengembalikan tipe tindakan Redux

Saya punya ini di basis kode;

export const login = (user, pass) => {
  return (dispatch) =>    dispatch({ type: LOGIN });
}

apa tipe pengembalian login?

Saya mencoba ini:

export const login = (user, pass)  : ReducerAction {
  return (dispatch) =>  dispatch({ type: LOGIN });
}

dan tipe itu pasti salah. Apa jenis pengembalian TS yang benar di sini? Terbelakang sulit menemukan jawabannya secara online.


person Community    schedule 12.02.2020    source sumber


Jawaban (2)


Cukup menyediakan antarmuka untuk props pengiriman tindakan redux Anda dengan cara berikut:

interface DispatchProps {
  login: () => void;
}

Dan kemudian Anda dapat menggunakan antarmuka di atas untuk menyediakan pengetikan untuk mapDispatchToProps Anda.

const mapDispatchToProps = (dispatch: Dispatch<DispatchProps>) =>
  bindActionCreators({
    login: () => login(),
  }, dispatch);

Jika Anda bekerja dengan react/redux/TypeScript, saya akan merekomendasikan panduan ini , karena memiliki banyak sumber daya. Selain itu, Anda mungkin ingin menginstal typesafe-actions, yang merupakan bentuk "utilitas Typesafe untuk "pembuat tindakan" dalam Arsitektur Redux / Flux".

person wentjun    schedule 13.02.2020

Masalahnya di sini adalah TypeScript tidak mengetahui tipe dispatch. Bisa apa saja, sejauh yang diketahui TypeScript, itu hanyalah argumen fungsi acak dan bisa bertipe any. Anda perlu mendeklarasikannya sebagai tipe yang benar dan TypeScript akan dapat menyimpulkan sisanya:

const LOGIN = "LOGIN";

type LoginAction = {
  type: typeof LOGIN
}

const login = (user, pass) => (dispatch: React.Dispatch<LoginAction>) => dispatch({type: 'LOGIN'});

Perhatikan bahwa tindakan login juga harus memiliki tipe yang dideklarasikan, karena tipe tersebut diteruskan ke tipe React.Dispatch generik sehingga TypeScript mengetahui jenis tipe yang dikirimkannya.

Anda mungkin perlu menginstal paket @types/react-redux untuk mendapatkan tipe React.Dispatch, saya tidak yakin dari mana asalnya.

person jered    schedule 13.02.2020