react遇到的问题

import React, { useReducer } from 'react';

function App() {
  const initState = {
    name: 'henry',
  }
  const reducer = (state, Action) => {
    console.log(str)//会报Cannot access 'str' before initialization，这是怎么实现的
    return state
  }
  const [state, dispatch] = useReducer(reducer, initState)
  let str = 'sss'
  return (
    <div>
      <span>{JSON.stringify(state)}</span>
      <button onClick={() => dispatch()}>打印</button>
    </div>
  )
}

export default App;

不太了解useReducer内部怎么去实现这个str不能访问的
但是把str往上提一行就没有问题了

有了解的同学帮忙讲解一下