Reactjs 我可以从功能组件中调用调用store.dispatch的函数，还是必须使用useDispatch？

下面的代码可以工作，但我对react-hooks是新手，我想知道我不应该这样做是否有原因。我希望能够从多个组件调用readData函数，也可以在应用程序顶部调用。（这是代码的缩写版本。）

函数缩减器（状态=初始状态，动作）{
//
}
const store=createStore（reducer）；
函数readData（）{
axios.get（“https://...")
。然后（（响应）=>{
dispatch（{type:“dataRead”，message:“dataRead”，data:response.data}）
});
}
函数App（）{
返回(
);
}
函数LoadBtn（）{
函数handleClick（）{
readData（）；
}
返回(
负载基站
)
}
函数显示（）{
const data=useSelector（state=>state.data）；
常量加载=加载。。。
如果（数据！=[]）{
正在加载={data[0].bio}
} 
返回(
{加载}
)
}

。始终使用React-Redux API与组件内的存储交互，例如

useDispatch

我不确定是否要将存储导入组件。调用它的函数是香草的，不属于react。但我在组件中调用该函数。你能澄清一下吗？无论如何，我想知道的是为什么你不应该这样做。链接医生说如果你做x或y，不要做，我知道我不会做x或y。在这种情况下，有没有理由不这样做？@toyko，

LoadButton

组件调用直接引用

createStore

结果的

readData

function reducer(state = initialState, action) {
     //
}

const store = createStore(reducer);

function readData(){
  axios.get("https://...")
    .then((response) => {
        store.dispatch({type: "dataRead", message:"dataRead", data: response.data})
    });
}

function App() {
  return (
    <Provider store={store}>
      <div className="App">
        <LoadBtn/>
        <Display/>
      </div>
    </Provider>
  );
}

function LoadBtn(){

  function handleClick(){
    readData();
  }

  return (
    <div onClick={handleClick}>LOAD BTN</div>
  )
  
}

function Display(){
   const data = useSelector(state => state.data);

   const loading = <div>Loading ...</div>

   if (data != []){
    loading = <div>{data[0].bio}</div>
   } 

   return (
      {loading}
  )
}