Могу ли я вызвать функцию, которая вызывает store.dispatch из функционального компонента, или мне нужно использовать useDispatch? - PullRequest
Новая
       147

Могу ли я вызвать функцию, которая вызывает store.dispatch из функционального компонента, или мне нужно использовать useDispatch?

0 голосов
/ 03 августа 2020

Следующий код работает, но я новичок в перехватчиках реагирования и хочу знать, есть ли причина, по которой мне не следует делать это таким образом. Я ищу возможность вызывать функцию 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}
  )
}

1 Ответ

1 голос
/ 03 августа 2020

Никогда не следует импортировать хранилище напрямую в компоненты React . Всегда используйте API React-Redux для взаимодействия с хранилищем внутри компонентов, например useDispatch.

...