import React from 'react'
import ReactDOM from 'react-dom'

import { Provider } from 'react-redux'
import store from './store'

import App from './App'

const rootElement = document.getElementById('root')
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  rootElement
)

import React from 'react'
import { useSelector, useDispatch } from 'react-redux'

export function Counter() {
  // 从 state 中获取当前的计数值
  const count = useSelector(state => state.value)

  // 获得当前 store 的 dispatch 方法
  const dispatch = useDispatch()

  // 在按钮的 click 时间中去分发 action 来修改 store
  return (
    <div>
      <button
        onClick={() => dispatch({ type: 'counter/incremented' })}
      >+</button>
      <span>{count}</span>
      <button
        onClick={() => dispatch({ type: 'counter/decremented' })}
      >-</button>
    </div>
  )
}

// 在创建 Redux Store 时指定了 redux-thunk 这个中间件
import { createStore, applyMiddleware } from 'redux'
import thunkMiddleware from 'redux-thunk'
import rootReducer from './reducer'

const composedEnhancer = applyMiddleware(thunkMiddleware)
const store = createStore(rootReducer, composedEnhancer)

//dispatch action 时就可以 dispatch 一个函数用于来发送请求

function fetchData() {
  return dispatch => {
    dispatch({ type: 'FETCH_DATA_BEGIN' });
    fetch('/some-url').then(res => {
      dispatch({ type: 'FETCH_DATA_SUCCESS', data: res });
    }).catch(err => {
      dispatch({ type: 'FETCH_DATA_FAILURE', error: err });
    })
  }
}

// dispatch action 时就可以 dispatch 一个函数用于来发送请求
import fetchData from './fetchData';

function DataList() {
  const dispatch = useDispatch();
  // dispatch 了一个函数由 redux-thunk 中间件去执行
  dispatch(fetchData());
}

function counterReducer(state = initialState, action) {
    switch (action.type) {
        case 'counter/incremented': return {value: state.value + action.payload}
        case 'counter/decremented': return {value: state.value - action.payload}
        default: return state
    }
}
const incrementAction = { type: 'counter/incremented', payload: 10 };
store.dispatch(incrementAction); // 计数器加 10
const decrementAction = { type: 'counter/decremented', payload: 10 };
store.dispatch(decrementAction); // 计数器减 10

// 实现计数器业务逻辑的拆分和重用
import { useState, useCallback }from 'react';
 
function useCounter() {
  // 定义 count 这个 state 用于保存当前数值
  const [count, setCount] = useState(0);
  // 实现加 1 的操作
  const increment = useCallback(() => setCount(count + 1), [count]);
  // 实现减 1 的操作
  const decrement = useCallback(() => setCount(count - 1), [count]);
  // 重置计数器
  const reset = useCallback(() => setCount(0), []);
  
  // 将业务逻辑的操作 export 出去供调用者使用
  return { count, increment, decrement, reset };
}

// 应用
import React from 'react';

function Counter() {
  // 调用自定义 Hook
  const { count, increment, decrement, reset } = useCounter();

  // 渲染 UI
  return (
    <div>
      <button onClick={decrement}> - </button>
      <p>{count}</p>
      <button onClick={increment}> + </button>
      <button onClick={reset}> reset </button>
    </div>
  );
}

import { useState } from 'react';
// asyncFunction 真正发出请求的函数
const useAsync = (asyncFunction) => {
  // 设置三个异步逻辑相关的 state
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  // 定义一个 callback 用于执行异步逻辑 相当于声明一个请求的函数，在需要请求数据的情况下调用
  const execute = useCallback(() => {
    // 请求开始时，设置 loading 为 true，清除已有数据和 error 状态
    setLoading(true);
    setData(null);
    setError(null);
    return asyncFunction()
      .then((response) => {
        // 请求成功时，将数据写进 state，设置 loading 为 false
        setData(response);
        setLoading(false);
      })
      .catch((error) => {
        // 请求失败时，设置 loading 为 false，并设置错误状态
        setError(error);
        setLoading(false);
      });
  }, [asyncFunction]);

  return { execute, loading, data, error };
};


// 应用

import React from "react";
import useAsync from './useAsync';

export default function UserList() {
  // 通过 useAsync 这个函数，只需要提供异步逻辑的实现
  const {
    execute: fetchUsers, // fetchUsers可以在需要请求的地方去使用
    data: users, // 返回的数据可以直接拿来渲染ui
    loading,
    error,
  } = useAsync(async () => {
    const res = await fetch("https://reqres.in/api/users/");
    const json = await res.json();
    return json.data;
  });
  
  return (
    // 根据状态渲染 UI...
  );
}

import { useState, useEffect } from 'react';

// 获取横向，纵向滚动条位置
const getPosition = () => {
  return {
    x: document.body.scrollLeft,
    y: document.body.scrollTop,
  };
};
const useScroll = () => {
  // 定一个 position 这个 state 保存滚动条位置
  const [position, setPosition] = useState(getPosition());
  useEffect(() => {
    const handler = () => {
      setPosition(getPosition(document));
    };
    // 监听 scroll 事件，更新滚动条位置
    document.addEventListener("scroll", handler);
    return () => {
      // 组件销毁时，取消事件监听
      document.removeEventListener("scroll", handler);
    };
  }, []);
  return position;
};

// 应用


import React, { useCallback } from 'react';
import useScroll from './useScroll';

function ScrollTop() {
  const { y } = useScroll();

  const goTop = useCallback(() => {
    document.body.scrollTop = 0;
  }, []);

  const style = {
    position: "fixed",
    right: "10px",
    bottom: "10px",
  };
  // 当滚动条位置纵向超过 300 时，显示返回顶部按钮
  if (y > 300) {
    return (
      <button onClick={goTop} style={style}>
        Back to Top
      </button>
    );
  }
  // 否则不 render 任何 UI
  return null;
}

import React, { useEffect, useCallback, useMemo, useState } from "react";
import { Select, Table } from "antd";
import _ from "lodash";
import useAsync from "./useAsync";

const endpoint = "https://myserver.com/api/";
const useArticles = () => {
  // 使用上面创建的 useAsync 获取文章列表
  const { execute, data, loading, error } = useAsync(
    useCallback(async () => {
      const res = await fetch(`${endpoint}/posts`);
      return await res.json();
    }, []),
  );
  // 执行异步调用
  useEffect(() => execute(), [execute]);
  // 返回语义化的数据结构
  return {
    articles: data,
    articlesLoading: loading,
    articlesError: error,
  };
};
const useCategories = () => {
  // 使用上面创建的 useAsync 获取分类列表
  const { execute, data, loading, error } = useAsync(
    useCallback(async () => {
      const res = await fetch(`${endpoint}/categories`);
      return await res.json();
    }, []),
  );
  // 执行异步调用
  useEffect(() => execute(), [execute]);

  // 返回语义化的数据结构
  return {
    categories: data,
    categoriesLoading: loading,
    categoriesError: error,
  };
};
const useCombinedArticles = (articles, categories) => {
  // 将文章数据和分类数据组合到一起
  return useMemo(() => {
    // 如果没有文章或者分类数据则返回 null
    if (!articles || !categories) return null;
    return articles.map((article) => {
      return {
        ...article,
        category: categories.find(
          (c) => String(c.id) === String(article.categoryId),
        ),
      };
    });
  }, [articles, categories]);
};
const useFilteredArticles = (articles, selectedCategory) => {
  // 实现按照分类过滤
  return useMemo(() => {
    if (!articles) return null;
    if (!selectedCategory) return articles;
    return articles.filter((article) => {
      console.log("filter: ", article.categoryId, selectedCategory);
      return String(article?.category?.name) === String(selectedCategory);
    });
  }, [articles, selectedCategory]);
};

const columns = [
  { dataIndex: "title", title: "Title" },
  { dataIndex: ["category", "name"], title: "Category" },
];

export default function BlogList() {
  const [selectedCategory, setSelectedCategory] = useState(null);
  // 获取文章列表
  const { articles, articlesError } = useArticles();
  // 获取分类列表
  const { categories, categoriesError } = useCategories();
  // 组合数据
  const combined = useCombinedArticles(articles, categories);
  // 实现过滤
  const result = useFilteredArticles(combined, selectedCategory);

  // 分类下拉框选项用于过滤
  const options = useMemo(() => {
    const arr = _.uniqBy(categories, (c) => c.name).map((c) => ({
      value: c.name,
      label: c.name,
    }));
    arr.unshift({ value: null, label: "All" });
    return arr;
  }, [categories]);

  // 如果出错，简单返回 Failed
  if (articlesError || categoriesError) return "Failed";

  // 如果没有结果，说明正在加载
  if (!result) return "Loading...";

  return (
    <div>
      <Select
        value={selectedCategory}
        onChange={(value) => setSelectedCategory(value)}
        options={options}
        style={{ width: "200px" }}
        placeholder="Select a category"
      />
      <Table dataSource={result} columns={columns} />
    </div>
  );
}

import { useRef } from 'react';

// 创建一个自定义 Hook 用于执行一次性代码
function useSingleton(callback) {
  // 用一个 called ref 标记 callback 是否执行过
  const called = useRef(false);
  // 如果已经执行过，则直接返回
  if (called.current) return;
  // 第一次调用时直接执行
  callBack();
  // 设置标记为已执行过
  called.current = true;
}



import useSingleton from './useSingleton';

const MyComp = () => {
  // 使用自定义 Hook
  useSingleton(() => {
    console.log('这段代码只执行一次');
  });

  return (
    <div>My Component</div>
  );
};

useEffect(() => {
  // componentDidMount + componentDidUpdate
  console.log('这里基本等价于 componentDidMount + componentDidUpdate');
  return () => {
    // componentWillUnmount
    console.log('这里基本等价于 componentWillUnmount');
  }
}, [deps])

const myEventHandler = useMemo(() => {
  // 返回一个函数作为缓存结果
  return () => {
    // 在这里进行事件处理
  }
}, [dep1, dep2]);

function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    // current 属性指向了真实的 input 这个 DOM 节点，从而可以调用 focus 方法
    inputEl.current.focus();
  };
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

const MyContext = React.createContext(initialValue);

const themes = {
  light: {
    foreground: "#000000",
    background: "#eeeeee"
  },
  dark: {
    foreground: "#ffffff",
    background: "#222222"
  }
};
// 创建一个 Theme 的 Context

const ThemeContext = React.createContext(themes.light);
function App() {
  // 整个应用使用 ThemeContext.Provider 作为根组件
  return (
    // 使用 themes.dark 作为当前 Context 
    <ThemeContext.Provider value={themes.dark}>
      <Toolbar />
    </ThemeContext.Provider>
  );
}

// 在 Toolbar 组件中使用一个会使用 Theme 的 Button
function Toolbar(props) {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

// 在 Theme Button 中使用 useContext 来获取当前的主题
function ThemedButton() {
  const theme = useContext(ThemeContext);
  return (
    <button style={{
      background: theme.background,
      color: theme.foreground
    }}>
      I am styled by theme context!
    </button>
  );
}

function MyComp() {
  const [count, setCount] = useState(0);
  if (count > 10) {
    // 错误：不能将 Hook 用在条件判断里
    useEffect(() => {
      // ...
    }, [count])
  }
  
  // 这里可能提前返回组件渲染结果，后面就不能再用 Hooks 了
  if (count === 0) {
    return 'No content';
  }

  // 错误：不能将 Hook 放在可能的 return 之后
  const [loading, setLoading] = useState(false);
  
  //...
  return <div>{count}</div>
}

a.
import React from 'react';
import { useWindowSize } from '../hooks/useWindowSize';

export const withWindowSize = (Comp) => {
  return props => {
    const windowSize = useWindowSize();
    return <Comp windowSize={windowSize} {...props} />;
  };
};

b.
import React from 'react';
import { withWindowSize } from './withWindowSize';

class MyComp {
  render() {
    const { windowSize } = this.props;
    // ...
  }
}

// 通过 withWindowSize 高阶组件给 MyComp 添加 windowSize 属性
export default withWindowSize(MyComp);

var str = 'abcded';
var obj = new String(str);

function newToString() {
  return 'hello world'
}

function func(val){
  val.toString = newToString;
}

func(str);
console.log(str); // abcded

func(obj);
console.log(String(obj)) // hello world

1. NaN不等于自身

NaN == (===/ != /!==) NaN  // true

2. 符号可以转为true,但不等值于true

Boolean(Symbol()) ,!Symbol(), Symbol() ==(===) true  // true false false

3. 即使字面量相同的引用类型，也是不严格相等的
{} === {}, /./ === /./, function() {} === function() {} // false false false

import * as mynames from 'module'; // mynames.x是对象属性读取

import {x} from 'module'; // x是来自原模块的引用，得到的是引用值

let { x : x2 }  = mynames // x2 是本地声明的变量可修改

function foo() {
    var showInArrow = () => {
        console.log(this.name);
    }
    showInArrow();
    var obj = {
        showInArrow,
        name: 'aObject',
        showThis: function() {
            console.log(this.name)
        }
    }
    with(obj) {
      var showThis2 = () => { console.log(this.name)}
      showThis();
      showThis2();
      showInArrow();
    }
}
foo.call({name: 'outSide'})
==>
outSide
aObject
outSide
outSide

function MyFunction() {}

MyFunction.prototype = new Function();
var myFunc = new MyFunction();

myFunc(); //触发异常无法执行

function foo(filename) {
    var [filename2, ...args] = arguments;

    // filename 会影响arguments
    filename = 'new file name';
    console.log(arguments[0]); // new file name
    console.log(filename2); //  test.txt

    // arguments 也会影响filename
    arguments[0] = filename2;
    console.log(filename);//  test.txt

    // 使用filenam2时，没有影响
    filename2 = 'update again';
    console.log(arguments[0]); //  test.txt
    console.log(filename);//  test.txt
}
foo('test.txt');

function foo(a=1,b,c=2,d) {
    console.log(...arguments); // undefined,100,200,300
    console.log(a,b,c,d); // 1,100,200,300
}
foo(undefined,100,200,300);

function foo(msg) {
   console.log(msg)
}
var i = 100;
foo(i+=20, i*=2, 'value:'+i); // 120
foo(i); // 240

var f = function func2() {
    console.log(typeof func2);
}

f() // function

console.log(typeof func2); // undefined

class MyFunc {
    static foo() {
        console.log('prototype method in myFunc');
    }
}

class MyFuncEx extends MyFunc {
    static foo() {
        console.log('own method in MyFuncEX');
    }
    callMe() {
        console.log('call me in MyFuncEx');
    }
}

var f = MyFuncEx.bind();
MyFuncEx.foo(); // own method in MyFuncEX
f.foo(); //  prototype method in myFunc

console.log('prototype' in Object.getPrototypeOf(MyFunc)) // false

// MyFunc.bind()生成的函数没有prototype
// class MyFuncEX2 extends MyFunc.bind() {} // 会报错

//  MyFuncEx原型有继承自MyFunc的prototype,可以声明,但实例不会被继承
class MyFuncEx3 extends MyFuncEx.bind() {}

// 继续继承MyFuncEx原型的prototype属性，实例可继承
class MyFuncEx4 extends MyFuncEx {}
(new MyFuncEx4).callMe() //call me in MyFuncEx

console.log('callMe' in Object.getPrototypeOf(MyFuncEx4.prototype)); // true
console.log('callMe' in Object.getPrototypeOf(MyFuncEx3.prototype)); // false
console.log('callMe' in  new MyFuncEx3); // false

var obj = {
    get fact() {
        const fact = x=> x && x*fact(x-1) || this.power || 1;
        return fact
    }
}

obj.power = 100;
obj.fact(9) // 36288000

var obj = {
    [Symbol.iterator] : function*() {
        var obj = {
    [Symbol.iterator] : function*() {
        for(var i =0;i< 10; i++) yield i;
    }
}

console.log(...obj) // 0 1 2 3 4 5 6 7 8 9
    }
}

console.log(...obj) // 0 1 2 3 4 5 6 7 8 9

var obj = {
    start: 3,
    [Symbol.iterator] : function*(start = 5, end = 10) {
        var {start, end} = {start, end, ...this};
        for(var i=start;i<end; i++) yield i;
    }
}

console.log(...obj) // 3 4 5 6 7 8 9
obj.end = 6;
console.log(...obj) // 3 4 5

delete obj.end
delete obj.start
console.log(...obj) // 5 6 7 8 9

var msg = (function myFunc(num) {
    return myFunc = typeof myFunc;
})(10) + ", and upvalue's type is: " + typeof myFunc;

console.log(msg); //  function, and upvalue's type is: undefined

var x = new Boolean(false)
console.log(x.valueOf())  ===> false
console.log(!!x) ===> false x此时是对象

var arr = [1,2,'345',,12];
var { 0: x, 1:y, length} = arr;
console.log(x,y,length); // 1,2,5
var x = {length: 100, ...arr};
console.log(x.length + ' => ' + Object.keys(x)); // 100 => 0,1,2,4,length

console.log(new Set('abcadf134oaafshjafgoi').size) ==> 14

Object.prototype.x = 100;
console.log(x) // 100
Object.getPrototypeOf(Object.getPrototypeOf(global)) === Object.prototype // true
global.constructor === Object

let list:number[] = [1,2,3]
或者
let list Array<number> = [1,2,3]

let x:[string,number]

//结合解构
function f([first, second]: [number, number]) {
    console.log(first);
    console.log(second);
}
f(input);

type C = { a: string, b?: number }
function f({ a, b }: C): void {
    // ...
}

enum Color {Red, Green, Blue} //默认从0开始给元素编号
let c: Color = Color.Red; //访问元素返回值
console.log(c) ===>0

enum Color {Red = 1, Green, Blue=4,Yellow} //未赋值的依据赋值的前一个，加1
let c: Color = Color.Green;
console.log(c) ===>2 color.Yellow ===>5
let colorName: string = Color[2]; ===>'Green'  Color[6]===>undefined //没赋值的为undefined

function warnUser(): void {
    console.log("This is my warning message");
}

// 返回never的函数必须存在无法达到的终点
function error(message: string): never {
    throw new Error(message);
}

declare function create(o: object | null): void;

create({ prop: 0 }); // OK
create(null); // OK

create(42); // Error
create("string"); // Error
create(false); // Error
create(undefined); // Error

const foo = {};
foo.bar = 123; // Error: 'bar' 属性不存在于 ‘{}’
foo.bas = 'hello'; // Error: 'bas' 属性不存在于 '{}'

interface Foo {
  bar: number;
  bas: string;
}

const foo = {} as Foo;
foo.bar = 123;
foo.bas = 'hello';

interface LabelledValue {
  label: string;
  color?: string;//在可选属性名字定义的后面加一个?符号,这个属性可传可不传
  //可选属性的好处之一是可以对可能存在的属性进行预定义，好处之二是可以捕获引用了不存在的属性时的错误
  readonly y: number;//属性名前用 readonly来指定只读属性
  [propName: string]: any;//索引签名，表示LabelledValue可以有任意数量的属性，只要不是上面已经定义过的 ；结合as 可以避免额外属性检查
}

function printLabel(labelledObj: LabelledValue) {
  console.log(labelledObj.label);
}

let myObj = {size: 10, label: "Size 10 Object"};
printLabel(myObj);

interface SearchFunc {
  (source: string, subString: string): boolean; //输入参数名，类型和返回值类型
}

let mySearch: SearchFunc;
mySearch = function(source: string, subString: string) { //参数名可以和SearchFunc定义的不同，因为只会检查对应位置类型
  let result = source.search(subString);
  return result > -1;
}

interface StringArray {
  [index: number]: string;
}

let myArray: StringArray;
myArray = ["Bob", "Fred"];

let myStr: string = myArray[0];

interface Shape {
    color: string;
}

interface PenStroke {
    penWidth: number;
}

interface Square extends Shape, PenStroke {
    sideLength: number;
}
let square = <Square>{};
square.color = "blue";
square.sideLength = 10;
square.penWidth = 5.0;

import React,{useState,useEffect}from 'react';

const [state,setState] = useState(initialState)
state 即为声明的变量
setState 即更新函数
initialState即state初始值，不传入时为undefined
使用：
const [count,setCount] = useState(0)
const [obj,setObj] = useState({a:1})

function App() {
  const [data,setData] = useState(3);
  useEffect(()=>{
    console.log('useEffect');
    let id = setTimeout(()=>{
      setData({a:1})
      // clearTimeout(id)
    },5000)
    return ()=>{ //卸载时执行
      clearTimeout(id)
    }
  },[]) //传入第二个参数，控制是否每次render完都执行

  useEffect(()=>{
    console.log('会从上到下执行')
  })
  return (
    <div>
      {
        (()=>{
          console.log('render')
          return null
        })()
      }
      <p>{JSON.stringify(data)}</p>
    </div>
  )
}

const MyContext = React.createContext();
const value = useContext(MyContext);

const themes = {
  light: {
    foreground: "#000000",
    background: "#eeeeee"
  },
  dark: {
    foreground: "#ffffff",
    background: "#222222"
  }
};
const ThemeContext = React.createContext(); //创建context 对象，可传入value初始值

function App() {
  let [thems,setThems] = useState(themes.dark)
  useEffect(()=>{
    console.log('useEffect');
    let id = setTimeout(()=>{
      setThems(themes.light)
    },5000)
    return ()=>{
      clearTimeout(id)
    }
  },[])
  return (
    <ThemeContext.Provider value={thems}>
      <Toolbar />
      <Child2 />
    </ThemeContext.Provider>
  )
}
function Toolbar(props) {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

function ThemedButton() {
  //获取最近的ThemeContext.Provider 标签上value的绑定值
  const theme = useContext(ThemeContext); 
  return (
    <button style={{ background: theme.background, color: theme.foreground }}>
      I am styled by theme context!
    </button>
  );
}
//子组件不依赖constext的数据时，使用React.memo可以避免在context有变化时进行的更新
const Child2 = React.memo((props)=>{
  console.log('fire')
  return <div>xxxxxx</div>
})

const refContainer = useRef(initialValue);

function TextInputWithFocusButton() {
  const inputEl = useRef(null);//生成绑定对象
  const onButtonClick = () => {
    // `current` 指向已挂载到 DOM 上的文本输入元素
    inputEl.current.focus();
  };
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}
export default App;

function MeasureExample() {
  const [height, setHeight] = useState(0);
  console.log('fire')
  const measuredRef = useCallback(node => {
    if (node !== null) {
      setHeight(node.getBoundingClientRect().height);
    }
  },[]);
  return (
    <>
      <h1 ref={measuredRef}>Hello, world</h1>
      <h2>The above header is {Math.round(height)}px tall</h2>
    </>
  );
}

const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);

function Child({event,data}){
  console.log('child-render')
  useEffect(()=>{
    console.log('child-effect')
    event()
  },[event])
return(
  <div>
    <p>child</p>
    <button onClick = {event}>调用父event</button>
  </div>
)
}
const set = new Set()
function Test(){
  const [count,setCount] = useState(0)
  const [data,setData] = useState({})
  const handle = useCallback(async ()=>{
    function temp(){
      setTimeout(()=>{
        return 'xxxx'
      },1000)
    }
    const res = await temp()
    setData(res)
    console.log('paent-useCallback',data)
  },[count]) //count变化才会生成新的handle,才会引起child组件的useEffect的执行
  set.add(handle)
  console.log('parent-render====>',data)
  return (
    <div>
      <button 
        onClick={e=>{
          setCount(count + 1)
        }}
      >
        count++
      </button>
      <p>set size:{set.size}</p>
      <p>count:{count}</p>
      <Child event={handle} />
    </div>
  )
}

function Test(){
  const [count,setCount] = useState(0)
  const handle1 = useMemo(()=>{
    console.log('handle1',count)
    return count
  },[])
  console.log('render-parent')
  return (
    <div>
      <p>
        demo:{count}
        <button onClick={()=>setCount(count+1)}>++COUNT</button>
      </p>
      <Child handle = {handle1} />
    </div>
  )
}
function Child({handle}){
  console.log('render-child')
  return (
    <div>
      <p>child</p>
      <p>prop-data:{handle}</p>
    </div>
  )
}

打印结果：
handle1 0
render-parent
render-child

const [state, dispatch] = useReducer(reducer, initialArg, init);

const initialState = {count: 0};

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return {count: state.count + 1};
    case 'decrement':
      return {count: state.count - 1};
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({type: 'decrement'})}>-</button>
      <button onClick={() => dispatch({type: 'increment'})}>+</button>
    </>
  );
}

const [state, dispatch] = useReducer(
    reducer,
    {count: initialCount}
  );

function init(initialCount) {
  return {count: initialCount};
}

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return {count: state.count + 1};
    case 'decrement':
      return {count: state.count - 1};
    case 'reset':
      return init(action.payload);
    default:
      throw new Error();
  }
}

function Counter({initialCount}) {
  const [state, dispatch] = useReducer(reducer, initialCount, init);
  return (
    <>
      Count: {state.count}
      <button
        onClick={() => dispatch({type: 'reset', payload: initialCount})}>
        Reset
      </button>
      <button onClick={() => dispatch({type: 'decrement'})}>-</button>
      <button onClick={() => dispatch({type: 'increment'})}>+</button>
    </>
  );
}