What I need to write in these places in code in Redux app(remake pure react to redux)?

Question

I have app wrote on pure React where I make request to server and get response - category list.This list I can filter using query params in url. Value for these parameters I take from the state. I needed to rework small part of my React app to Redux. But I just started learn redux, that is, in some places in my redux code I don't know what I need to write.

Small part my React app (before I remake to Redux):

const Home = () => {
    
const [value, setValue] = useState({
    listCategory: [],
    currentPage: 1, 
    buttonsPagination: 0,   
    searchInput: ""
});

// Here useEffect and fetch function, but I dont write it, because it not related with my question

  const changePage = (argPage) => {    
    setValue((prev) => ({
      ...prev,
      currentPage: argPage,
    }));};

  const upadateStateSearchInput = (event) => {         
     setValue({
        ...value,
        searchInput: event.target.value,
        currentPage:1
    });};

return ( 
<div>
     {[...Array(value.buttonsPagination)].map((item, index) => (
          <button key={'listCategory' + index}   
                  onClick={() => changePage(index + 1)}>{index + 1}
          </button>   ))}

     <input type="text" onChange={upadateStateSearchInput} value={value.searchInput} />
</div>
);}

Below I will write what I was able to do myself - according to my current knowledge in Redux. What I needed to write instead these - /*.......*/?

What already could to do myself in Redux:

// action
const changePage = (/*.......*/) => ({
    type: "CHANGE_PAGE",
    payload: /*.......*/
});

const upadateStateSearchInput = (/*.......*/) => ({
    type: "UPDATE_SEARCHINPUT",
    payload: /*.......*/
});

//reducer
const initialState = {
  listCategory: [],
  currentPage: 1,
  buttonsPagination: 0,
  searchInput: "",
  isLoading: false 
};

export function filterList(state = initialState, action) {
  switch (action.type) {
    case "CHANGE_PAGE":
      return {
        ...state,
        /*.......*/ 
      };
    case "UPDATE_SEARCHINPUT":
      return {
        ...state,
        /*.......*/
      };
    case "LOAD_DATA_START":
      return {
        ...state,
        isLoading: true 
      };
    case "LOAD_DATA_END": {
      const { payload } = action;
      return {
        ...state,
        listCategory: payload.data,
        currentPage: payload.page,
        buttonsPagination: Math.ceil(payload.total / payload.perPage),
        isLoading: false 
      };
    }
    default:
      return state;
  }
}

{[...Array(value.buttonsPagination)].map((item, index) => (
          <button key={/*...........*/}   
                  onClick={/*.........*/}>{/*.........*/}
          </button>   ))}

     <input type="text" onChange={/*........*/} value={/*........*/} />

  const dispatch = useDispatch();
  
  const listCategory = useSelector(state => state.filterListReducer.listCategory);
  const currentPage = useSelector(state => state.filterListReducer.currentPage);
  const searchInput = useSelector(state => state.filterListReducer.searchInput);
  const buttonsPagination = useSelector(state => state.filterListReducer.buttonsPagination);

  const rootReducer = combineReducers({
     filterListReducer: filterList,
  });

Answer 1

// actions.js
export const changePage = (argPage) => ({
    type: "CHANGE_PAGE",
    payload: argPage
});

export const upadateStateSearchInput = (event) => ({
    type: "UPDATE_SEARCHINPUT",
    payload: event.target.value
});

//reducer.js
const initialState = {
  listCategory: [],
  currentPage: 1,
  buttonsPagination: 0,
  searchInput: "",
  isLoading: false 
};

export function filterList(state = initialState, action) {
  switch (action.type) {
    case "CHANGE_PAGE":
      return {
        ...state,
       currentPage: action.payload
      };
    case "UPDATE_SEARCHINPUT":
      return {
        ...state,
        currentPage: 1,
        searchInput: action.payload  
      };
    case "LOAD_DATA_START":
      return {
        ...state,
        isLoading: true 
      };
    case "LOAD_DATA_END": {
    const {payload}=action;
      return {
        ...state,
        listCategory: payload.data,
        currentPage: payload.page,
        buttonsPagination: Math.ceil(payload.total / payload.perPage),
        isLoading: false 
      };
    }
    default:
      return state;
  }
}

//App.js
import { useDispatch, useSelector } from "react-redux";
import {changePage, upadateStateSearchInput} from 'actions';

const App = () => {
    const dispatch = useDispatch();
    const filterList = useSelector(state => state.filterListReducer)
    return (
        <div>
            {[...Array(filterList.buttonsPagination)].map((item, index) => (
                <button key={'listCategory' + index}
                        onClick={() => dispatch(changePage(index + 1))}>{index + 1}
                </button>))
            }
            <input type="text" onChange={(event)=> dispatch(upadateStateSearchInput(event))} value={filterList.searchInput}/>
        </div>
    );
}

export default App;