i18n.changeLanguage('zh') 不可以放入actions中去处理吗?

来源:9-9 【中间件】自定义中间件 actionLog

匆匆又夏天丶

2021-03-13

我尝试放入action中去处理,代码如下:

export const changeLanguageActionCreator = (
  languageCode: 'zh' | 'en'
): ThunkAction<void, TRootState, unknown, IChangeLanguageAction> => {
  return (dispatch, state) => {
    i18n.changeLanguage('zh')
    dispatch({
      type: CHANGE_LANGUAGE,
      payload: 'zh'
    })
  }
}

不知为何在类组件Header.class.tsx中会报错,在函数式组件Header.tsx中没有如下问题,排查发现是mapDispatchToProps中对dispatch类型注解成Dispatch类型造成的

const mapDispatchToProps = (dispatch: Dispatch) => {
  return {
    changeLanguage(code: 'zh' | 'en') {
      dispatch(changeLanguageActionCreator(code))
    },
    addLanguage(name: string, code: string) {
      const action = addLanguageActionCreator(name, code)
      dispatch(action)
    }
  }
}

Dispatch类型
错误信息如下

想问下老师如果我想在这处理i18是否合理,如果合理,那么这个ts的类型错误问题我该如何解决呢?套的深的类型我就看不懂了,出现错误的问题应该是上文中提到的。

写回答

1回答

阿莱克斯刘

2021-03-14

使用thunk action来处理i18n切换有一定的合理性,因为i18n切换会引起副作用。但是thunk更多的是用来处理异步逻辑的,而i18切换并不存在异步逻辑,所以其实放在thunk action中有点高射炮打蚊子的感觉。

不过我觉得你已经快抓到要点了,你可以尝试在中间件中处理i18n的切换。

0
0

React18 系统精讲 结合TS打造旅游电商平台

React18 精讲 + 结合 TS 实战 + 热门业务开发,获取必备技能

1993 学习 · 1015 问题

查看课程