zoukankan      html  css  js  c++  java
  • [React] Use the useReducer Hook and Dispatch Actions to Update State (useReducer, useMemo, useEffect)

    As an alternate to useState, you could also use the useReducer hook that provides state and a dispatch method for triggering actions. In this lesson, we’ll centralize logic that is spread across a web application and centralize it using the useReducer hook.

    NOTE: Since hooks are still a proposal and only pre-released, it’s not currently recommended to use them in production.

    useReducer:

      const [todos, dispatch] = useReducer((state, action) => {
        switch (action.type) {
          case "ADD_TODO":
            todoId.current += 1;
            return [
              ...state,
              { id: todoId.current, text: action.text, completed: false }
            ];
          case "DELETE_TODO":
            return state.filter(todo => todo.id !== action.id);
          case "TOGGLE_TODO":
            return state.map(todo =>
              todo.id === action.id ? { ...todo, completed: !todo.completed } : todo
            );
          default:
            return state;
        }
      },initialValue);

    useReducer can accept second param as a function, so we can replace 'initialValue' with a function return a 'initialValue', which means we can using cache for the function if the param doesn't change, we always return the cache. To do that we can use 

    useMemo:

      const [todos, dispatch] = useReducer((state, action) => {
        switch (action.type) {
          case "ADD_TODO":
            todoId.current += 1;
            return [
              ...state,
              { id: todoId.current, text: action.text, completed: false }
            ];
          case "DELETE_TODO":
            return state.filter(todo => todo.id !== action.id);
          case "TOGGLE_TODO":
            return state.map(todo =>
              todo.id === action.id ? { ...todo, completed: !todo.completed } : todo
            );
          default:
            return state;
        }
      }, useMemo(initialValue, []));

    The second parameter of 'useMemo' indicates when the memorized version should change. In our case, we want it to always be the same, so passing an empty array conveys that message.

    To handle side effect of action, in our case, is update localstorage, we can use useEffect:

    useEffect(
      () => {
        window.localStorage.setItem("todos", JSON.stringify(todos));
      },
      [todos]
    );

    ---

  • 相关阅读:
    APPCAN   版本控制SVN
    关于 java中的换行符
    BCompare中文版安装包
    netstat
    springboot mybatis generator
    mysql删除表的方式
    jdbc写入和读取过程
    hadoop全排序和二次排序
    mapreduce之数据倾斜
    hdfs切片的计算方式
  • 原文地址:https://www.cnblogs.com/Answer1215/p/10426941.html
Copyright © 2011-2022 走看看