Exemplo de uma simples aplicação de busca de filmes com redux

jsx

// /src/index.js
import { Provider } from 'react-redux';

import { store } from './store';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

// /src/pages/Home.js
import { useState } from 'react';

import * as C from '../components';
export const Home = () => {

  return (
    <main>
      <C.SearchBar />
      <C.ShowFilm />
    </main>
  );
};

// /src/components/index.js
import { useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';

export const SearchBar = () => {
  const [allMovies, setAllMovies] = useState([]);
  //lógica de requisição conforme valor do input

  return (
    <>
      <input />
      {allMovies && allMovies.map((movie) => <FilmResult key={movie.id} movie={movie} />)} 
    </>
  );
};


export const FilmResult = ({ movie }) => {
  const dispatch = useDispatch()
  return (
    <div onClick={() => dispatch(type: 'movie/setMovie', payload: movie)}>
      <img src={movieData.src} />
      <p>{movieData.title}</p>
    </div>
  );
};

export const ShowFilm = () => {
  const movie = useSelector((state) => state.movie)
  if (!movie) return null
  return (
    <div>
      <h2>{movie.title}</h2>
      <img src={movie.src}
      <p>{movie.description}</p>
      <h3>Actors</h3>
      {movie.actors.map((actor) => <p key={actor}>{actor}</p>)}
    </div>
  );
};