Q&A
記載のエラーが具体的にこのソースコード内のどこで出ているか、記載できますか？
概要
現在、TypeScript + React + Reduxの構成で開発を行っています。非同期処理にはredux-thunkを使用しています。
そこで、actionをTypeScriptによって型付けを行ったところ下記の様なエラーが発生いたしました。
色々詰めていったところ、asyncを消去すれば下記のエラーが消え、そこから絞り出してredux-thunkの型エラーであることがわかりました。
いろいろな記事を参考にし、ThunkActionで型付けを行いましたが、エラーが消えてくれません…。
どなたか解決方法のご教授お願いいたします。
エラーの内容
TS2322: Type '0' is not assignable to type '{ label: number; sent: () => any; trys: never[]; ops: never[]; }'.
TS2345: Argument of type 'any' is not assignable to parameter of type 'never'.
該当のコード
import { logout } from './authActions'; import * as H from 'history'; import { Action, Dispatch } from 'redux'; import { ThunkAction } from 'redux-thunk'; import User from '../class/User'; import * as actionTypes from '../utils/actionTypes'; import { setNotification } from './toggleActions'; interface IAuthParam { id: string; pw: string; } // リクエスト関係 export const startRequest = () => ({ type: actionTypes.START_REQUEST, }); export const finishRequest = () => ({ type: actionTypes.FINISH_REQUEST, }); // 認証 export const authUser = () => ({ type: actionTypes.AUTH_USER, }); export const unAuthUser = () => ({ type: actionTypes.UNAUTH_USER, }); // Signup export const signup = ( values: IAuthParam ): ThunkAction<void, any, undefined, Action<string>> => async dispatch => { try { dispatch({ type: actionTypes.START_REQUEST }); await User.signup(values); dispatch({ type: actionTypes.AUTH_USER }); dispatch({ type: actionTypes.CLOSE_LOGIN_DIALOG }); dispatch(setNotification('success', 'サインアップ成功！')); } catch (e) { console.log(e); dispatch(setNotification('error', 'サインアップ失敗！')); } finally { dispatch({ type: actionTypes.FINISH_REQUEST }); } }; // Login export const login = ( values: IAuthParam ): ThunkAction<void, any, undefined, Action<string>> => async dispatch => { try { dispatch({ type: actionTypes.START_REQUEST }); await User.login(values); dispatch({ type: actionTypes.AUTH_USER }); dispatch({ type: actionTypes.CLOSE_LOGIN_DIALOG }); dispatch(setNotification('success', 'ログイン成功！')); } catch (e) { console.log(e); dispatch(setNotification('error', 'ログイン失敗！')); } finally { dispatch({ type: actionTypes.FINISH_REQUEST }); } }; // Logout export const _logout = ( token: string, history: H.History ): ThunkAction<void, any, undefined, Action<string>> => async dispatch => { try { dispatch({ type: actionTypes.START_REQUEST }); await User.logout(token); } catch (e) { console.log(e); } finally { dispatch({ type: actionTypes.UNAUTH_USER }); history.push('/'); dispatch({ type: actionTypes.FINISH_REQUEST }); dispatch(setNotification('success', 'ログアウト成功！')); } }; // ユーザー情報を取得 export const getUser = ( _token: string, history: H.History ): ThunkAction<void, any, undefined, Action<string>> => async dispatch => { try { dispatch({ type: actionTypes.START_REQUEST }); dispatch({ type: actionTypes.AUTH_USER }); } catch (e) { console.log(e); dispatch({ type: actionTypes.UNAUTH_USER }); history.push('/'); } finally { dispatch({ type: actionTypes.FINISH_REQUEST }); dispatch(setNotification('error', 'エラーが発生しました！ログインし直して下さい。')); } }; // ユーザー情報を設置 export const setUser = (id: string) => ({ type: actionTypes.SET_USER, payload: { id: id, }, });
追記
下記の様にActionCreatorを渡す様にいたしましたが、ダメでした…。
// Signup export const signup = ( values: IAuthParam ): ThunkAction<void, any, undefined, Action<string>> => async dispatch => { try { dispatch(startRequest); await User.signup(values); dispatch(authUser); dispatch(closeLoginDialog); dispatch(setNotification('success', 'サインアップ成功！')); } catch (e) { console.log(e); dispatch(setNotification('error', 'サインアップ失敗！')); } finally { dispatch(finishRequest); } };
追記２
各種パッケージのバージョンとtsconfig.jsonです！
{ "name": "think", "version": "1.0.0", "main": "index.ts", "license": "MIT", "scripts": { "build": "webpack --mode development", "watch": "webpack -w", "start": "webpack-dev-server --config ./webpack.config.js --mode development", "tsc": "./node_modules/.bin/tsc" }, "dependencies": { "@types/react": "^16.9.23", "@types/react-dom": "^16.9.5", "react": "^16.13.0", "react-dom": "^16.13.0" }, "devDependencies": { "@babel/core": "^7.8.7", "@babel/plugin-proposal-class-properties": "^7.8.3", "@babel/polyfill": "^7.8.7", "@babel/preset-env": "^7.8.7", "@babel/preset-react": "^7.8.3", "@babel/register": "^7.8.6", "@improbable-eng/grpc-web": "^0.12.0", "@material-ui/core": "^4.9.5", "@material-ui/icons": "^4.9.1", "@material-ui/lab": "^4.0.0-alpha.45", "@material-ui/types": "^5.0.0", "@types/google-protobuf": "^3.7.2", "@types/qrcode.react": "^1.0.0", "@types/react-copy-to-clipboard": "^4.3.0", "@types/react-lazyload": "^2.6.0", "@types/react-lottie": "^1.2.3", "@types/react-redux": "^7.1.5", "@types/react-router-dom": "^5.1.3", "@types/styled-components": "^5.0.1", "axios": "^0.19.2", "babel-loader": "^8.0.6", "css-loader": "^3.4.2", "file-loader": "^5.1.0", "google-protobuf": "^3.11.4", "grpc": "^1.24.2", "grpc-tools": "^1.8.1", "grpc-web": "^1.0.7", "grpc_tools_node_protoc_ts": "^2.5.10", "hard-source-webpack-plugin": "^0.13.1", "prettier": "^1.19.1", "protoc-gen-ts": "^0.0.6", "pusher-js": "^5.1.1", "qrcode.react": "^1.0.0", "react-copy-to-clipboard": "^5.0.2", "react-lazyload": "^2.6.5", "react-lottie": "^1.2.3", "react-quill": "^1.3.3", "react-redux": "^7.1.3", "react-rnd": "^10.1.6", "react-router-dom": "^5.1.2", "react-share": "^4.0.1", "redux": "^4.0.5", "redux-thunk": "^2.3.0", "style-loader": "^1.1.3", "styled-components": "^5.0.1", "ts-loader": "^6.2.1", "ts-protoc-gen": "^0.12.0", "typescript": "^3.8.3", "webpack": "^4.42.0", "webpack-cli": "^3.3.11", "webpack-dev-server": "^3.10.3" }, "private": true }
{ "compilerOptions": { /* Basic Options */ "target": "es5", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */ "module": "esnext", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */ "lib": [ "esnext", "dom" ], /* Specify library files to be included in the compilation. */ "allowJs": true, /* Allow javascript files to be compiled. */ "checkJs": true, /* Report errors in .js files. */ "jsx": "react", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */ "sourceMap": true, /* Generates corresponding '.map' file. */ "outDir": "./dist", /* Redirect output structure to the directory. */ "rootDir": "./src", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */ "removeComments": true, /* Do not emit comments to output. */ "downlevelIteration": true, /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */ "strict": true, /* Enable all strict type-checking options. */ "noImplicitAny": false, /* Raise error on expressions and declarations with an implied 'any' type. */ "strictNullChecks": true, /* Enable strict null checks. */ "noImplicitThis": false, /* Raise error on 'this' expressions with an implied 'any' type. */ "alwaysStrict": false, /* Parse in strict mode and emit "use strict" for each source file. */ /* Additional Checks */ "noUnusedLocals": true, /* Report errors on unused locals. */ "noUnusedParameters": true, /* Report errors on unused parameters. */ "moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */ "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */ "esModuleInterop": true, /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */ "forceConsistentCasingInFileNames": true, /* Disallow inconsistently-cased references to the same file. */ "skipLibCheck": true, "resolveJsonModule": true, }, "include": [ "src" ], "exclude": [ "src/generated/*" ], "compileOnSave": true, }
signup, login, logout, getUserで発生しています！
概要の「asyncを消去すれば…」という文言も上記の関数の話です！
回答1件
0
ベストアンサー
dispatch の引数を redux の action にする必要があると思います。
setNotification 関数はわかりませんが、少なくとも { type: actionTypes.START_REQUEST } は action ではないと思います。
最終的にやりたいことがわからない部分があるので、明言できませんが、type の値を更新したいのであれば、更新する action を actionCreator で作成して、ThunkAction で dispatch で呼び出すことになります。
以下が参考になるかと思います。
TypeScriptでRedux Thunkを使う
上記では、increment, decrement といった action を先に作成して、ThunkAction 内で dispatch で呼び出しています。
投稿2020/03/19 01:01
総合スコア544
追記いたしました！是非ご一読お願いいたします！
関数呼び出しは必要かと思います。
dispatch(startRequest());
としてもダメですか？
全部、dispatch(ActionCreator())に変更しましたが、ダメですね…。
考えられる可能性を全て考慮して一つずつ潰していき、原型がほとんどなくなるまで消去していきました（asyncを残して)がやはり、コンパイルは通りません。同じエラーが表示されます…。そしてasyncを最後に消したところコンパイルは通りました。ただ、ここは非同期通信をしたいので絶対外せないですし…。
似たような状況を再現してみましたが、エラーの再現は取れませんでした。
Redux, redux-thunk, typescript のそれぞれのバージョンの問題かもしれません。
バージョンはわかりますか？
"redux": "^4.0.5"、 "react-redux": "^7.1.3"、"redux-thunk": "^2.3.0"、@types/react-redux": "^7.1.5" です！過去にcreate-react-appで作った際はこのエラー表示されなかったんですよね…。今回は自分で環境を作っています。追記でpackage.jsonやtsconfig.jsonを追加しましたので、是非ご確認いただけると幸いです！
あなたの回答
tips
プレビュー
