В хедере есть кнопка при нажатии в стор записывается новый список . Но мувлист не реагирует на измения этого списка в стор не перерендерить

код редюсера и стор

        const initialState = {
         movieList: []
        };
     export const reducer = (state=initialState, action) => {
         switch (action.type) {
             case 'GET_MOVIES':
                 console.log(action.payload);
                 return {...state, movieList: action.payload};

             case 'BUTTON':
        console.log(action.payload);
        return {...state, movieList: action.payload};
             default:
        return state;

         }
     }

     export const store = createStore(reducer);

код хедера

         export const NewHeader = (props) => {
         const [{movieList} = props, dispatch] = useReducer(reducer, {
    movieList: [],
         })

         const getFromButton = async () => {
             try {
        const requestMovies = await fetch(https://api.themoviedb.org/3/discover/movie?                                                  
        api_key=${apiKey}&language=en-US&sort_by=popularity.
      desc&include_adult=false&include_video=false&page=2);
        const jsonMovies = await requestMovies.json();
        const {results} = jsonMovies;
        console.log(results);

        dispatch({type: "BUTTON", payload: results});

    } catch (e) {
        console.log(e);
    }
       }
       useEffect(() => {
    getFromButton();
       }, []);

       return (
    <div className="header">
        <img src={Logo} className="header-logo" alt="logo"/>
        <div className="header-menu">{
            menu.map(value => {
                return (
                    <div className="header-menu" key={value.url}>
                        <NavLink className="header-menu-link" to={value.url}>{value.name} </NavLink>
                    </div>
                )
            })
        }
        </div>
        {/*<div className="header-menu">*/}
        {/*    <input type="text" onChange={getMovieName}/>*/}
        {/*    <button onClick={searchMovie(movie)}>Пошук</button>*/}
        {/*</div>*/}
        <div className="header-menu">
            <button onClick={getFromButton}>click</button>
            <span>Вхід</span>
            <span>/</span>
            <span>Регістарція</span>
        </div>
           </div>
       );
   }

   export const ConnectNewHeader = connect()(NewHeader);

код мувлист

       onst [{movieList} = props, dispatch] = useReducer(reducer, {
    movieList: [],
       })

       const getMovies = async () => {
    try {
        const requestMovies = await fetch(https://api.themoviedb.org/3/discover/movie?       
           api_key=${apiKey}&language=en-US&sort_by=popularity.
           desc&include_adult=false&include_video=false&page=1);
        const jsonMovies = await requestMovies.json();
        const {results} = jsonMovies;
        console.log(results);
        dispatch({type: "GET_MOVIES", payload: results});

    } catch (e) {
        console.log(e);
    }
       }
       const render = () => {
    return (movieList.map(value => {
        return (
            <div key={value.id}>{value.title}</div>
        )
    }))

       }
       useEffect(() => {
           getMovies();
       }, []);

       useEffect(() => {
    render();
       }, [movieList]);


       return (
    
    <div>{render()}

    </div>
       )

   }

   export const ConnectNewMovielist = connect()(NewMovielist);