title: How to use useEffect to get data from redux using useSelector @redux/toolkit?
body: <p>i am working on a pet-shop react Dapp, at certain point the requirement is to auto refresh pet adopters list.. so for this i have tried useEffect with useSelector to get the data from store... but the problem is it is running and i can see it in my console but it doesn't refresh the list. to get the updated list i need to refresh the page which is not a good idea.</p>
  <p><strong>Problem</strong></p>
  <p>i open two same UI tabs, on UI one i am adopting a pet it updates the adopters list and hide the button of adopt pet, but the same time second UI doesn't updated automatically, if i need to see any updates i must refresh the UI(page) to get updates.</p>
  <p>i want it to just refresh the list without refreshing the whole page, only a specific part of the page updates no need to refresh the whole page...</p>
  <p><strong>adoptionSlice.js</strong></p>
  <pre><code>import { createAsyncThunk, createSlice } from &quot;@reduxjs/toolkit&quot;;
  import Web3 from &quot;web3&quot;;
  import Adoption from '../contracts/Adoption'
  
  export const initWeb3 = createAsyncThunk(
      'InitWeb3',
      async (a, thunkAPI) =&gt; {
          console.log('initWeb3 a: ', a)
          console.log('initWeb3 thunkapi: ', thunkAPI)
          console.log('initWeb3 dispatch: ', thunkAPI.dispatch)
          try {
  
              if (Web3.givenProvider) {
                  const web3 = new Web3(Web3.givenProvider)
                  await Web3.givenProvider.enable();
                  web3.eth.handleRevert = true;
  
                  const networkId = await web3.eth.net.getId();
                  const network = Adoption.networks[networkId];
                  const contract = new web3.eth.Contract(Adoption.abi, network.address)
                  const addresses = await web3.eth.getAccounts()
                  thunkAPI.dispatch(loadAdopters({
                      contract: contract,
                      address: addresses[0]
                  }))
                  console.log(addresses)
  
                  return {
                      web3: web3,
                      contract: contract,
                      address: addresses[0],
                  }
              }
              else {
                  console.log('Error In Loading Web3')
              }
          }
          catch (err) {
              console.log('Error In Loading')
          }
      }
  )
  
  // export const loadAdopters = createAsyncThunk(
  //     'LoadAdopters',
  //     async (a, thunkAPI) =&gt; {
  //         console.log('in loadAdopters a = ', a);
  //         console.log('in loadAdopters thunkApi = ', thunkAPI);
  //         console.log('in loadAdopters thunkApi state = ', thunkAPI.getState());
  //         const contract = thunkAPI.getState().adoptReducer.contract;
  //         console.log('loadadopters contract = ', contract);
  //         const adopterList = await contract.methods.getAdopters().call()
  //         return adopterList
  //     }
  // )
  export const loadAdopters = createAsyncThunk(
      &quot;LoadAdopters&quot;,
      async(data,thunkAPI)=&gt;{
          const adopterList = await data.contract.methods.getAdopters().call();
          return adopterList;
      }
  )
  
  const adoptSlice = createSlice({
      name: 'AdoptSlice',
      initialState: {
          web3: null,
          contract: null,
          address: null,
          adopters: [],
          adoptInProgress: false,
          adopError: false,
          adoptErrorMessage: '',
          releasingPetStatus: false,
          releasePetError: '',
          releaseErrorMessage: ''
      },
      reducers: {
          adopt: () =&gt; { }
      },
      extraReducers: {
  [initWeb3.fulfilled]: (state, action) =&gt; {
              console.log(&quot;In fullfil = &quot;, state);
              console.log(&quot;In fullfil = &quot;, action);
              state.web3 = action.payload.web3;
              state.contract = action.payload.contract;
              state.address = action.payload.address;
          },
          [loadAdopters.fulfilled]: (state, action) =&gt; {
              state.adopters = action.payload
          },
  }
  
  export const adopReducer = adoptSlice.reducer;
  export const { adopt } = adoptSlice.actions;
  </code></pre>
  <blockquote>
  <p><strong>adoptionSlice.js</strong> for loading web3 and to get loadAdopters</p>
  </blockquote>
  <p><strong>App.js</strong></p>
  <pre><code>function App() {
    const dispatch = useDispatch();
    
    const web3 = useSelector((state)=&gt;{
      console.log(&quot;state in app= &quot;,state);
      return state.adoptReducer.web3
    })
   
    useEffect(()=&gt;{
      dispatch(initWeb3());
    // eslint-disable-next-line react-hooks/exhaustive-deps
    },[])
  
    return (
      &lt;div&gt;
        &lt;PetList&gt;&lt;/PetList&gt;
      &lt;/div&gt;
    );
  }
  
  export default App;
  </code></pre>
  <p><strong>Adopter.js</strong></p>
  <pre><code>import React from 'react'
  import { useEffect } from 'react'
  import { useDispatch, useSelector } from 'react-redux'
  import { loadAdopters } from '../store/adoptSlice'
  
  export const Adopters = () =&gt; {
      const dispatch = useDispatch()
      const adoptersList = useSelector((state) =&gt; {
          return state.adoptReducer.adopters
      })
  
      useEffect(() =&gt; {
  
          const interval = setInterval(() =&gt; {
              dispatch(loadAdopters())
              console.log('updated')
          }, 2000)
          return () =&gt; clearInterval(interval)
      }, [])
      return (
          &lt;div&gt;
              &lt;div&gt;Adopters List&lt;/div&gt;
              &lt;div&gt;
                  {
                      adoptersList.map((list, index) =&gt; (
                          list !== '0x0000000000000000000000000000000000000000' ? &lt;div key={index}&gt;index {index} : {list}&lt;/div&gt; : null
                      ))
                  }
              &lt;/div&gt;
          &lt;/div&gt;
      )
  }
  </code></pre>
  <blockquote>
  <p><strong>Adopter.js</strong> to get the list of adopters from store</p>
  </blockquote>
  <p><a href="https://i.stack.imgur.com/KSXj7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KSXj7.png" alt="this is the adopters list" /></a></p>