title: sharing states between two components with useReducer
body: <p>trying to share the states from one component to another: The state can be accessed from main component but it comes undefined when accessing from a new component
  This is my reducer:</p>
  <pre><code>export const  tableReducer=(state = [], action)=&gt; {
      switch (action.type) {
          case 'SELECTED_LIST':
              state = JSON.parse(JSON.stringify(action.payload));
              return state;
          default:
              return state
      }
  }
  </code></pre>
  <p>access it from a different file:</p>
  <pre><code>const [userList, usersDispatch] = useReducer(tableReducer, []);
  
  useEffect(() =&gt; {
              const list = Object.keys(selectedRowIds).length &gt; 0 ? selectedFlatRows.map(
                      d =&gt; d.original.email
                  )
               : '';
              usersDispatch({ type: 'SELECTED_LIST', payload: list, });
      
          }, [selectedRowIds, selectedFlatRows]);
  </code></pre>
  <p>and in a new component:</p>
  <pre><code>const [userList] = useReducer(tableReducer);
  
      const deleteUsers = () =&gt; {
          console.log(userList)
      }
  </code></pre>
  <p>but here <code>console.log(userList)</code> it results to <code>undefined</code></p>