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

    ---

  • 相关阅读:
    js伪数组转数组内部实现
    Vuex核心部分学习参考地址
    vue中让异步代码变成同步的写法
    node.js中文件操作路径和模板标识路径问题
    如果不想安装cnpm又想使用淘宝的服务器来下载,怎么做?
    npm常用命令
    node中模块加载机制
    通过nodejs,简单模拟客户端和服务端进行通信
    vue中非父子组件的传值
    图论1-2
  • 原文地址:https://www.cnblogs.com/Answer1215/p/10426941.html
Copyright © 2011-2022 走看看