React + Redux how create a function on reducers

JavaScript
1

hi, i’ve create an Server -React App and i want to add Redux:

 constructor() {
    super();
    this.state = {
      isLoad: false,
      tvSeries: [],
      movies: [],
      horror: [],
      scifiFantasySeries: [],
      headerSlide: []
    }
  }


  componentDidMount() {
  
    this.loadHeader();
  }

  loadHeader = () =>{
    fetch('api/data')
        .then(data => data.json())
        .then(data => {
            this.setState({
                tvSeries: data.popularSeries,
                movies: data.popularMovies,
                horror: data.horrorMovies,
                scifiFantasySeries: data.scifiFantasySeries
            })
        })
        .then(data => {
            let i = 0;
            let pre = [0];
            while(i < 5 && this.state.headerSlide.length !== 5) {
                let number = Math.floor(Math.random() * 20 );
                pre.forEach(num => {
                  if(number === num){
                    number++;
                  }
                })
                if(number % 2 === 0 && this.state.tvSeries[number].backdrop_path != null){
                    let newElement = [...this.state.headerSlide, this.state.tvSeries[number]];
                    this.setState({headerSlide: newElement})
                } else  if(this.state.movies[number].backdrop_path != null){
                    let newElement = [...this.state.headerSlide, this.state.movies[number]];
                    this.setState({headerSlide: newElement})
                }
                pre.push(number);
                i++;
            }
        })
        .then(() => {
          $(".loader").fadeOut(1000);
          setTimeout(()=> {
            this.setState({isLoad: true})
          },1000)
        })
        .catch(err => console.log(err));
  }

how can create this function on Redux, every guide i found no one used this type of functions

2

It really depends on what do you want to store with redux, but you definitely do not want to fetch inside reducer. I would suggest to go somewhat like this:

...
fetch('api/data')
  .then(data => data.json())
  .then((data) => {
    dispatchReducerAction(data);
  })

Keep your reducers simple and pure (no side effects).
For side effects only use componentsDidSomething() or useEffect()
(name of the hook clearly suggests that :slight_smile:)

3

Also keep in mind that with React (in perfect situation) you would want to go SSR and fetch is not the best choice for that, as it’s only client-side API