react hooks useReducer

useReducer

useReducer 接受的第一个参数是一个函数，我们可以认为它就是一个reducer，reducer的参数就是常规reducer里面的state和action，返回改变后的state。
useReducer 第二个参数为 state 的初始值。
useReducer 返回一个数组，数组的第一项就是更新之后 state 的值 ，第二个参数是派发更新的 dispatch 函数 。dispatch 的触发会触发组件的更新，这里能够促使组件从新的渲染的一个是 useState 派发更新函数，另一个就 useReducer 中的 dispatch。

// App.tsx
import React, { useReducer } from "react";
import App1 from './App1';

import './App.css';
function App() {

    /* number为更新后的state值,  dispatchNum 为当前的派发函数 */
    const [ num , dispatchNum ] = useReducer((state: number,action: { payload?: any; name: string; })=>{
      const { payload , name  } = action
      /* return的值为新的state */
      switch(name){
          case 'add':
              return state + 1
          case 'sub':
              return state - 1 
          case 'reset':
            return payload       
      }
      return state
  },0)

  return (
  <div className="App">
    当前值：{ num }
    { /* 派发更新 */ }
    <button onClick={()=>dispatchNum({ name:'add' })} >增加</button>
    <button onClick={()=>dispatchNum({ name:'sub' })} >减少</button>
    <button onClick={()=>dispatchNum({ name:'reset' ,payload:666 })} >赋值</button>
    { /* 把dispatch 和 state 传递给子组件  */ }
    <App1  dispatch={ dispatchNum } State={{ num }} />
  </div>
  );
}

export default App;

// App1.tsx
import React, {  } from "react";
import './App.css';

function App1(porps:any) {
  console.log(porps)
  return (
    <div className="App">
        <h1>A1：{porps.State.num}</h1>
    </div>
  );
}

export default App1;

转自：https://www.jianshu.com/p/ab8d838e25fb