关于TS在React-Redux-Hooks中使用的问题

前言

上一篇文章我们通过介绍三种不同的实现计数器的方法简单讲了react，redux，hooks的几个重要特性和基本用法，因为我创建脚手架时使用的是TS的写法，所以在写代码的时候还额外遇到了一些问题，前两个例子因为没涉及到什么东西，所以和JS的写法差不多，但是最后使用Hooks的时候因为设计的方法较多，所以遇到了一个问题，这里记录下来加深对于类型安全和Redux的理解。

复盘

首先我们还是先把TS的代码放上来：

import React from 'react' import {Provider, useSelector , useDispatch} from 'react-redux' import {createStore} from 'redux' const rootReducer = (state ={ count: 0 }, action: { type: string, value: number }) => { switch(action.type) { case 'add': return {...state, count: state.count + 1} case 'reduce': return {...state, count: state.count - 1} case 'initial': return {...state, count: action.value} default: return state } } const store = createStore(rootReducer) const Count: React.FC = () => { const count = useSelector((state )=>state.count) const dispatch = useDispatch() const addcount = {type: 'add'} const reduceCount = {type: 'reduce'} const initial = {type: 'initial', value: 0} return ( <div> {count} <button onClick={() => {dispatch(addcount)}}>+</button> <button onClick={() => {dispatch(reduceCount)}}>-</button> <button onClick={() => {dispatch(initial)}}>=</button> </div> ) } const App: React.FC = () => ( <Provider store={store}> <Count /> </Provider> ) export default App

这种写法会遇到一个问题，TS无法判断state的类型，会默认给它一个unknown，这样我们使用state.count就会报错。

解决

按照以前的经验，其实很简单可以解决，我们传一个接口就好了，那么关于state，我们说白了其实就是一个对象，对于这个方法，我们只要传一个count即可：

interface RootState { count: number }

延申

但是关于这个问题其实还有个解决方式，那就是自定义自己的useSelector，这是官方例子中解释的一种方式。

首先我们要引入TypedUseSelectorHook:

import {Provider, useSelector as useSelectorCopy , useDispatch, TypedUseSelectorHook} from 'react-redux'

接着我们就可以定义自己的useSelector：

type RootState = ReturnType<typeof rootReducer> const useSelector: TypedUseSelectorHook<RootState> = useReduxSelector

这样的方式同样也可以解决。

总结

TS的东西我学的还是有点浅的，更多的是要读懂如何把TS和我们的项目结合，但是TS的优点或多或少已经感受到了，总之拥抱TS已经是大势所趋，平时写的时候多用一下吧。