使用 Hook 简化 Flux

在 React 16.8 版本引入 Hook 之后，在 React 中使用 Flux 概念变得比较简单了，这主要是通过useContext()和useReducer()两个 Hook 函数。

借助于useContext()，全局 State 可以被注入到 Context 中，通过 Provider 向组件树提供。useReducer()可以直接将ReduceStore中的reduce()方法映射进组件类，并且直接向组件类提供dispatch()函数以分发 Action。原则上，由于useReducer()返回的 State 和dispatch()方法是成对的，所以在使用 Provider 向组件树提供 Context 时，要将两者都提供出去。以下给出一个参考示例。

const LoginInitialState = { loggedIn: false, user: '' };
const LoginContext = React.createContext(null);

function LoginReducer(state, action) {
  // 这里完成State变化操作
}

function App() {
  const [LoginState, dispatch] = useReducer(LoginReducer, LoginInitialState);
  return (
    <LoginContext.Provider value={{ LoginState, dispatch }}>
      <div>Application UI</div>
    </LoginContext.Provider>
  );
}

export { App as default, LoginContext };

在子组件上可以这样来使用。

import { LoginContext } from './App';

function LoginPage() {
  const loginCtx = useContext(LoginContext);
  const loginAction = () => {
    loginCtx.dispatch(loginActionCreator());
  };

  return <button onClick={loginAction}>登录</button>;
}

这样，在不引入 Flux 的情况下，只需要定义若干 Action Creator 和 Reduce 函数，搭配上不可变对象，即可直接完成全部全局 State 管理的功能。