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]
    );

    ---

  • 相关阅读:
    Extjs 4 生成饼状图的例子
    cocos2d-x 3.0rc2 对于每个包执行情况的重要平台 (超级方便)
    HDOJ 1495 非常可乐 【BFS】
    Android采用HttpClient下载图片
    解决本地访问Android文档是非常慢的问题
    潜在语义分析Latent semantic analysis note(LSA)原理及代码
    你奋斗这么辛苦,这辈子要证明什么?
    Objective-C时间戳转换的转换和时间
    Delphi 线程resume 不能调用Execute
    Delphi 多线程 “尚未调用CoInitialize错误”的解决方法
  • 原文地址:https://www.cnblogs.com/Answer1215/p/10426941.html
Copyright © 2011-2022 走看看