yarn add @reduxjs/toolkit

yarn add redux 
yarn add react-redux 
yarn add redux-immutable-state-invariant 
yarn add redux-thunk 
yarn add redux-devtools-extension

import { configureStore } from '@reduxjs/toolkit'
import filter from '...'
import movie from '...'

export default configureStore({
  reducer: {
    filter,
    movie,
  },
})

import { combineReducers, applyMiddleware, createStore } from "redux"
import reduxImmutableStateInvariant from 'redux-immutable-state-invariant'
import thunk from 'redux-thunk'
import { composeWithDevTools } from 'redux-devtools-extension/logOnlyInProduction'
import filter from '...'
import movie from '...'

// Custom middlewares based on redux-immutable-state-invariant
const immutableStateInvariant = // deeply compares state values for mutations. 
// It can detect mutations in reducers during a dispatch, and also mutations that 
// occur between dispatches (such as in a component or a selector). When a 
// mutation is detected, it will throw an error and indicate the key path for 
// where the mutated value was detected in the state tree.
const serializableStateInvariant = // a custom middleware created specifically 
// for use in Redux Toolkit. Similar in concept to immutable-state-invariant, 
// but deeply checks your state tree and your actions for non-serializable values 
// such as functions, Promises, Symbols, and other non-plain-JS-data values. 
// When a non-serializable value is detected, a console error will be printed 
// with the key path for where the non-serializable value was detected.
const middleware = process.env.NODE_ENV !== 'production' ?
  [thunk, immutableStateInvariant, serializableStateInvariant] :
  [thunk];
const rootReducer = combineReducers({ 
  filter, 
  movie, 
})
export default createStore(rootReducer, composeWithDevTools(
  applyMiddleware(...middleware)
))

import { createSlice } from '@reduxjs/toolkit'

const sliceName = 'movie'

const movieSlice = createSlice({
  name: sliceName,
  initialState: {
    entities: [],
    totalEntities: 0,
    error: '',
    loading: false,
  },
  reducers: {
    resetMovies: (state) => {
      state.entities = []
      state.totalEntities = 0
      state.error = ''
      state.loading = false
    },
  },
})

export const { resetMovies } = movieSlice.actions

export default movieSlice.reducer

const initialState = {
  entities: [],
  totalEntities: 0,
  error: '',
  loading: false,
}

const RESET_MOVIES = 'RESET_MOVIES'

export const resetMovies = () => ({
  type: RESET_MOVIES
})

export default function movie(state = initialState, action) {
  switch (action.type) {
    case RESET_MOVIES:
      return {
        entities: [],
        totalEntities: 0,
        error: '',
        loading: false,
      }
    default:
      return state
  }
}

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit'

const sliceName = 'movie'

export const fetchMovies = createAsyncThunk(
  `${sliceName}/fetchMovies`,
  (_, { getState }) => {
    const { searchTerm, page, type } = getState().filter
    return movieAPI.fetchBySearch(searchTerm, page, type)
  }
)

const movieSlice = createSlice({
  ...
  extraReducers: {
    [fetchMovies.pending]: (state) => {
      state.loading = true
    },
    [fetchMovies.fulfilled]: (state, action) => {
      state.entities = action.payload.Search
      state.totalEntities = action.payload.totalResults
      state.error = ''
      state.loading = false
    },
    [fetchMovies.rejected]: (state, action) => {
      state.entities = []
      state.totalEntities = 0
      state.error = action.error.message
      state.loading = false
    },
  },
})

...

const FETCH_MOVIES_PENDING = 'FETCH_MOVIES_PENDING'
const FETCH_MOVIES_FULFILLED = 'FETCH_MOVIES_FULFILLED'
const FETCH_MOVIES_REJECTED = 'FETCH_MOVIES_REJECTED'

...

export const fetchMoviesPending = () => ({
  type: FETCH_MOVIES_PENDING
})
export const fetchMoviesFulfilled = (result) => ({
  type: FETCH_MOVIES_FULFILLED,
  payload: result
})
export const fetchMoviesRejected = (error) => ({
  type: FETCH_MOVIES_REJECTED,
  payload: error
})

export function fetchMovies() {
  return async function (dispatch, getState) {
    dispatch(fetchMoviesPending())
    const { searchTerm, page, type } = getState().filter
    try {
      const result = await movieAPI.fetchBySearch(searchTerm, page, type)
      dispatch(fetchMoviesFulfilled(result))
    } catch (error) {
      dispatch(fetchMoviesRejected(error))
    }
  }
}

export default function movie(...) {
  switch (action.type) {
    ...
    case FETCH_MOVIES_PENDING:
      return {
        ...state,
        loading: true,
      }
    case FETCH_MOVIES_FULFILLED:
      return {
        entities: action.payload.Search,
        totalEntities: action.payload.totalResults,
        error: '',
        loading: false,
      }
    case FETCH_MOVIES_REJECTED:
      return {
        entities: [],
        totalEntities: 0,
        error: action.error.message,
        loading: false,
      }
    ...
  }
}

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import store from './store'
import { Provider } from 'react-redux'

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

import React, { useEffect } from 'react'
import Movies from './presenter'
import { useSelector, shallowEqual, useDispatch } from 'react-redux'
import { search } from '../../services/filter/slice'

export default () => {
  const { entities, totalEntities, error, loading } = useSelector(
    (state) => state.movie,
    shallowEqual
  )
  const searchTerm = useSelector((state) => state.filter.searchTerm)
  const dispatch = useDispatch()

  useEffect(() => {
    dispatch(search(searchTerm))
  }, [dispatch, searchTerm])

  return (
    <Movies
      entities={entities}
      totalEntities={totalEntities}
      error={error}
      loading={loading}
    />
  )
}