javascript - 我需要在 Redux 应用程序的代码中的这些地方写什么(重新制作纯粹的 redux react )？

Question

我在 pure React 上写了应用程序我向服务器发出请求并获得响应 - category list .我可以使用 query params 过滤此列表在网址中。我从状态中获取这些参数的值。我需要将 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;