轻松掌握useReducer和useContext，打造专属简版Redux

2023-12-28 01:07:21

引言

React Hooks的出现为我们提供了全新的方式来编写React组件。它们让我们能够在函数组件中使用状态和生命周期方法，从而使代码更加简洁和易于维护。

在众多React Hooks中，useReducer和useContext是非常有用的两个Hooks。useReducer可以帮助我们管理组件的状态，而useContext可以帮助我们在组件之间共享状态。

在这篇文章中，我们将使用useReducer和useContext来创建一个简化的Redux。Redux是一个流行的状态管理库，它可以帮助我们管理应用程序的全局状态。

useReducer

useReducer是React Hooks中用于管理状态的钩子。它接受一个reducer函数和一个初始状态作为参数，并返回一个包含当前状态和一个dispatch方法的对象。

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

reducer函数是一个纯函数，它接收当前状态和一个action对象作为参数，并返回一个新的状态。

const reducer = (state, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1;
    case 'DECREMENT':
      return state - 1;
    default:
      return state;
  }
};

dispatch方法用于向reducer发送action对象。

dispatch({ type: 'INCREMENT' });

useContext

useContext是React Hooks中用于在组件之间共享状态的钩子。它接受一个Context对象作为参数，并返回该Context对象的当前值。

const value = useContext(Context);

Context对象是一个React组件，它可以存储和共享状态。

const Context = React.createContext(null);

创建简版Redux

现在，我们已经了解了useReducer和useContext是如何工作的，我们可以开始创建一个简版的Redux了。

首先，我们需要创建一个Context对象来存储全局状态。

const StoreContext = React.createContext(null);

接下来，我们需要创建一个组件来提供全局状态。这个组件通常称为Provider组件。

const Provider = ({ children, store }) => {
  return (
    <StoreContext.Provider value={store}>
      {children}
    </StoreContext.Provider>
  );
};

然后，我们需要创建一个组件来消费全局状态。这个组件通常称为Consumer组件。

const Consumer = ({ children }) => {
  const store = useContext(StoreContext);
  return children(store);
};

最后，我们需要创建一个reducer函数来管理全局状态。

const reducer = (state, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1;
    case 'DECREMENT':
      return state - 1;
    default:
      return state;
  }
};

现在，我们就可以使用useReducer和useContext来创建一个简版的Redux了。

const App = () => {
  const [state, dispatch] = useReducer(reducer, 0);

  return (
    <Provider store={{ state, dispatch }}>
      <div>
        <h1>{state}</h1>
        <button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button>
        <button onClick={() => dispatch({ type: 'DECREMENT' })}>Decrement</button>
      </div>
    </Provider>
  );
};