我需要在 Redux 應用程序的代碼中的這些地方寫什么（重新制作對 redux 的純反應）？

Question

我在pure React上編寫了應用程序，我在其中向服務器發出請求並獲取響應 - category list 。我可以使用 url 中的query params過濾此列表。 我從 state 中獲取這些參數的值。 我需要將我的 React 應用程序的一小部分修改為 Redux。 但是我剛開始學redux，也就是在我的redux代碼的某些地方不知道需要寫什么。

我的 React 應用程序的一小部分（在我重新制作到 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>
);}

下面我將根據我目前在 Redux 中的知識寫下我自己能做的事情。 我需要寫這些 - /*.......*/ ？

在 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;