深刻理解useSelector，useDispatch以及useReducer

背景：

        Hooks 提供了很多好用的api，甚至很多人认为Hooks的useReducer等Api已经可以取代Redux了。其实Hooks和Redux的使用场景并不冲突，而且可以互相借鉴，而且react-redux最新版本(7.1)也引入了Hooks风格的Api。

        useState和useReducer是Hooks中最常用的Api，适合用来进行简单的状态管理，但也都有一些无法满足的需求。

useState

import React, { useState } from "react";

const ComponentUseState = () => {
  const [num, setNum] = useState(0);

  return (
    <div>
      <h2>Using useState</h2>
      Number: {num}
      <button onClick={() => setNum(num + 1)}>+</button>
      <button onClick={() => setNum(num - 1)}>-</button>
    </div>
  );
};

export default ComponentUseState;

说明：useState可以用最简单的方式更新状态，但是状态更新的逻辑（例如上面例子中的加减一运算）散落在UI中，不能独立复用，也不便于测试。

useReducer

import React, { useReducer } from 'react'

//初始值
const initialState = {num: 0};

//处理逻辑的纯函数
const reducer = (state, action) => {
  switch(action.type) {
    case 'decrement':
      return {...state, num: state.num - 1}
    case 'increment':
      return {...state, num: state.num + 1}
    default:
      return state;
  }
}

const ComponentUseReducer = () => {
  //将初始值和处理逻辑的纯函数作为参数传递到useReducer
  const [state, dispatch] = useReducer(initialState, reducer);

  const { num } = state;
  return (
    <div>
      <h2>Using useReducer</h2>
      Number: {num}
      <button onClick={() => dispatch({type: 'increment'})}>+</button>
      <button onClick={() => dispatch({type: 'decrement'})}>-</button>
    </div>
  );
};

export default ComponentUseReducer;

 说明：使用useReducer可以解决上面useState无法解决的问题。可以看到useReducer的逻辑脱离   了UI，可以被独立复用。reducer本质上就是一个纯函数（无任何副作用的函数），我们可以对       reducer进行单独测试，甚至可以在chrome中进行调试，如下所示。

背景：

实际使用中reducer应该以单独的文件存在，上面为了方便大家理解才放到了一起。useReducer虽然很好地分离了逻辑和UI，但是无法像redux一样进行跨组件的状态共享。 而且react-redux 7.1之后还可以使用useSelector、useDispatch等HooksApi替代connect，减少模板代码。 

useSelector、useDispatch

import React from "react";
import { createStore } from "redux";
import { Provider, useSelector, useDispatch } from "react-redux";

const initialState = { num: 0 };

//创建store
const store = createStore(reducer, initialState);

const reducer = (state, action) => {
  switch (action.type) {
    case "decrement":
      return { ...state, num: state.num - 1 };
    case "increment":
      return { ...state, num: state.num + 1 };
    default:
      return state;
  }
};


const ComponentUseReactRedux = () => {
  return (
    <div>
      <h2>ComponentUseReactRedux</h2>
      <Provider store={store}>
        <ChildComponentUseReactRedux />
      </Provider>
    </div>
  )
}

const ChildComponentUseReactRedux = () => {
  //通过调用useSelector从store的state中获取我们需要的数据
  const num = useSelector(state => state.num);
  //通过调用useDispatch可以派发action更改store中的state
  const dispatch = useDispatch();
  return (
    <div>
      <h3>Using useSelector, useDispatch</h3>
      Number: {num}
      <button onClick={() => dispatch({ type: "increment" })}>+</button>
      <button onClick={() => dispatch({ type: "decrement" })}>-</button>
    </div>
  );
};

export default ComponentUseReactRedux;

 总结：通过useSelector、useDispatch等方法，我们可以用Hooks方法完成类似Redux的功能，但是Hooks和Redux之间并没有替代关系，应该更好地共存和融合。