首次使用Redux开发时状态无法更新，useEffect订阅也无法获取新值

问题原因&修复方案 #

1. Reducer写法错误

Redux Toolkit的createReducer内置Immer，仅支持两种状态更新写法：直接修改state的属性、return新的状态对象。你当前直接给局部参数state重新赋值是无效操作，不会触发状态更新。
修改reducer.ts中的reducer逻辑：

export default createReducer(initialState, builder=>
  builder
.addCase(setUsername, (state ,action)=>{
  // 直接修改属性即可，RTK会自动生成不可变更新
  state.username = action.payload
})
.addCase(setPassword,(state,action)=>{
  state.password = action.payload
})
.addCase(setModalOpen,(state,action)=>{
  state.modalOpen = action.payload
})
  )

2. 状态选择器路径错误

hooks.ts中的useGetAuthState选择器取值路径错误，你需要对应store中注册auth reducer的挂载key，比如你注册reducer时配置为{ auth: authReducer }，就修改为：

export function useGetAuthState():IAuth {
  return useSelector((state:AppState)=>state.auth)
}

3. 组件调用逻辑错误

你直接在组件顶层调用setUsername，会导致每次组件渲染都触发dispatch，进而触发无限重渲染。同时内部组件Topic访问的是外层的authState闭包值，无法拿到最新状态。
修改implementation.tsx逻辑：

function Review():JSX.Element {
  const match = useRouteMatch()
  const setUsername = useSetUsername()

  // 放到useEffect中仅挂载时执行一次
  useEffect(() => {
    setUsername('why wont this work?')
  }, [setUsername])


  function Topic(){
    let {topicId} = useParams<{topicId:string}>()
    // 内部直接调用选择器获取最新状态
    const authState = useGetAuthState()
    console.log(authState)
    console.log(topicId)
    return <>The topic is... {topicId}</>
  }

  function Main(){
    return (
      <div>
        Primary Page
      </div>
    )
  }

  return(
    <Switch>
      <Route path={`${match.path}/:topicId`}>
        <Topic/>
      </Route>
      <Route path={`${match.path}/`}>
        <Main />
      </Route>
    </Switch>
  )
}

额外修复（可选，不影响当前问题）

actions.ts中setModalOpen的action type存在拼写错误，'auth/setModalOpan'应改为'auth/setModalOpen'，避免后续调用该接口时状态不更新。

内容的提问来源于stack exchange，提问作者Raven