Fatal编程技术网
  • javascript/
  • Javascript 当我重新制作pure React to Redux时，我需要在这行中写些什么来代替圆点？

Javascript 当我重新制作pure React to Redux时，我需要在这行中写些什么来代替圆点？

javascript reactjs

Javascript 当我重新制作pure React to Redux时，我需要在这行中写些什么来代替圆点？,javascript,reactjs,Javascript,Reactjs,我有一个React应用程序，可以向服务器发出请求并获得响应-类别列表。此应用程序还具有一些功能（分页，按标题过滤，在页面上选择数量类别，按asc描述排序）。现在我需要将小部件重新制作成Redux。但是我刚刚开始学习Redux，我不知道我需要在Home.js和EditListReducer.js中写两行什么。我在这行中这样标记位置：… 首先，我写了我已经在Redux中写过的内容，下面我写了我的React应用程序（写在纯React上）中的一小部分内容，我将其重新制作成Redux 在REDUX上写道：

我有一个
React
应用程序，可以向服务器发出请求并获得响应-
类别列表
。此应用程序还具有一些功能（分页，按标题过滤，在页面上选择数量类别，按asc描述排序）。现在我需要将小部件重新制作成
Redux
。但是我刚刚开始学习
Redux
，我不知道我需要在
Home.js
和
EditListReducer.js
中写两行什么。我在这行中这样标记位置：
…

首先，我写了我已经在Redux中写过的内容，下面我写了我的React应用程序（写在纯React上）中的一小部分内容，我将其重新制作成Redux

在REDUX上写道： 当我不知道我需要写什么时，我会注释行

Home.js： EditListReducer.js： 写在REACT上（我重新制作的小部分）：
您只需在reducer中保持一个处于状态的
isLoading
值，仅“LOAD\u DATA\u START”操作就足以知道何时加载数据。在“LOAD_DATA_END”（加载数据结束）操作中，您将在现有状态和新数据中展开，并且不要忘记切换回加载状态

EditListReducer.js:

const initialState = {
  listCategory: [],
  currentPage: 1,
  quantityElementPage: 3,
  buttonsPagination: 0,
  buttonsQuantityElementPage: 3,
  sortAscDesc: "asc",
  searchInput: "",
  isLoading: false // <-- add loading to state slice
};

export function EditListReducer(state = initialState, action) {
  switch (action.type) {
    case "LOAD_DATA_START":
      return {
        ...state,
        isLoading: true // <-- just set loading true
      };
    case "LOAD_DATA_END":
      return {
        ...state,
        ...action.payload, // <-- spread in payload from action
        isLoading: false // <-- set loading false
      };
    default:
      return state;
  }
}

const Home = () => {
  useEffect(() => {
    fetchData(
      value.currentPage,
      value.quantityElementPage,
      value.sortAscDesc,
      value.searchInput
    );
  }, [
    value.currentPage,
    value.quantityElementPage,
    value.sortAscDesc,
    value.searchInput
  ]);

  function fetchData(
    valuePage,
    valueElement,
    valueSort,
    valueFilter,
    dispatch
  ) {
    return async dispatch => {
      try {
        dispatch({ type: "LOAD_DATA_START" }); // <-- no need for payload, just action type

        const data = await api(`pathWithQueryParams`, {
          method: "GET"
        });

        // Construct payload
        const payload = {
          listCategory: data.data,
          currentPage: data.page,
          buttonsPagination: Math.ceil(data.total / data.perPage),
          quantityElementPage: data.perPage
        };
        dispatch({ type: "LOAD_DATA_END", payload }); // <-- Pass payload
      } catch (e) {
        console.error(e);
      }
    };
  }
};

const initialState = {
  listCategory: [],
  currentPage: 1,
  quantityElementPage: 3,
  buttonsPagination: 0,
  buttonsQuantityElementPage: 3,
  sortAscDesc: "asc",
  searchInput: "",
  isLoading: false // <-- add loading to state slice
};

export function EditListReducer(state = initialState, action) {
  switch (action.type) {
    case "LOAD_DATA_START":
      return {
        ...state,
        isLoading: true // <-- just set loading true
      };
    case "LOAD_DATA_END": {
      const { payload } = action;
      return {
        ...state,
        listCategory: payload.data,
        currentPage: payload.page,
        buttonsPagination: Math.ceil(payload.total / payload.perPage),
        quantityElementPage: payload.perPage
        isLoading: false // <-- set loading false
      };
    }
    default:
      return state;
  }
}

const Home = () => {
  useEffect(() => {
    fetchData(
      value.currentPage,
      value.quantityElementPage,
      value.sortAscDesc,
      value.searchInput
    );
  }, [
    value.currentPage,
    value.quantityElementPage,
    value.sortAscDesc,
    value.searchInput
  ]);

  function fetchData(
    valuePage,
    valueElement,
    valueSort,
    valueFilter,
    dispatch
  ) {
    return async dispatch => {
      try {
        dispatch({ type: "LOAD_DATA_START" }); // <-- no need for payload, just action type

        const data = await api(`pathWithQueryParams`, {
          method: "GET"
        });

        dispatch({ type: "LOAD_DATA_END", payload: data }); // <-- Pass data in payload
      } catch (e) {
        console.error(e);
      }
    };
  }
};

const initialState={
列表类别：[]，
当前页面：1，
QuantityElement第3页，
按钮触发：0，
按钮数量元素页码：3，
排序CDESC：“asc”，
搜索输入：“”，

isLoading:false//非常感谢！我在一个应用程序中看到reducer这样写：除了你提出的选项之外，你还可以演示与我发送给你的屏幕截图中的选项类似的选项吗？也就是说，你在const payload中输入的内容在reducer文件中。不需要删除你写的内容，只需将此添加到你的答案中即可。我想想看，检查我的应用程序的人会要求有效载荷在减速器中。但是你的答案很好！@erik如果你提到在减速器中使用
action.payload
，那么我更新了我的答案，因为这是我的疏忽，它需要从action对象中提取。如果不是，你可以吗请澄清一下您希望我从屏幕截图中提取什么？我只是认为在我的情况下，减速机应该是这样的：@erik啊，我明白了，您希望/需要在减速机中处理处理逻辑，而不是预处理…我将补充回答。非常感谢您！

const Home = () => {
  useEffect(() => {
    fetchData(
      value.currentPage,
      value.quantityElementPage,
      value.sortAscDesc,
      value.searchInput
    );
  }, [
    value.currentPage,
    value.quantityElementPage,
    value.sortAscDesc,
    value.searchInput
  ]);

  function fetchData(
    valuePage,
    valueElement,
    valueSort,
    valueFilter,
    dispatch
  ) {
    return async dispatch => {
      try {
        dispatch({ type: "LOAD_DATA_START" }); // <-- no need for payload, just action type

        const data = await api(`pathWithQueryParams`, {
          method: "GET"
        });

        // Construct payload
        const payload = {
          listCategory: data.data,
          currentPage: data.page,
          buttonsPagination: Math.ceil(data.total / data.perPage),
          quantityElementPage: data.perPage
        };
        dispatch({ type: "LOAD_DATA_END", payload }); // <-- Pass payload
      } catch (e) {
        console.error(e);
      }
    };
  }
};



const initialState = {
  listCategory: [],
  currentPage: 1,
  quantityElementPage: 3,
  buttonsPagination: 0,
  buttonsQuantityElementPage: 3,
  sortAscDesc: "asc",
  searchInput: "",
  isLoading: false // <-- add loading to state slice
};

export function EditListReducer(state = initialState, action) {
  switch (action.type) {
    case "LOAD_DATA_START":
      return {
        ...state,
        isLoading: true // <-- just set loading true
      };
    case "LOAD_DATA_END": {
      const { payload } = action;
      return {
        ...state,
        listCategory: payload.data,
        currentPage: payload.page,
        buttonsPagination: Math.ceil(payload.total / payload.perPage),
        quantityElementPage: payload.perPage
        isLoading: false // <-- set loading false
      };
    }
    default:
      return state;
  }
}



const Home = () => {
  useEffect(() => {
    fetchData(
      value.currentPage,
      value.quantityElementPage,
      value.sortAscDesc,
      value.searchInput
    );
  }, [
    value.currentPage,
    value.quantityElementPage,
    value.sortAscDesc,
    value.searchInput
  ]);

  function fetchData(
    valuePage,
    valueElement,
    valueSort,
    valueFilter,
    dispatch
  ) {
    return async dispatch => {
      try {
        dispatch({ type: "LOAD_DATA_START" }); // <-- no need for payload, just action type

        const data = await api(`pathWithQueryParams`, {
          method: "GET"
        });

        dispatch({ type: "LOAD_DATA_END", payload: data }); // <-- Pass data in payload
      } catch (e) {
        console.error(e);
      }
    };
  }
};