React中的useSelector+useDispatch

React中的useSelector+useDispatch

我们都知道，Vue中的Vuex是Vue提供的一个全局性的状态管理仓库和工具，通过Vuex，很多事情就可以不调用接口和传值，只需要调用仓库去使用即可。那么在React中也有这样的状态管理仓库，它叫Redux。
当函数式组件要使用 redux store 时调用useSelector+useDispatch这两个钩子函数。
例子：
首先建立 redux store. 一个App 只能有唯一一个 redux store。此文件是一个手动建立的文件，这样命名文件是 convention.

import { createStore } from "redux";
const counterReducer = (state = { counter: 0 }, action) => {
  if (action.type === "increment") {
    return { counter: state.counter + 1 };
  }
  if (action.type === "decrement") {
    return { counter: state.counter - 1 };
  }
  return state;
};

const store = createStore(counterReducer);
export default store;

这里，我们需要安装Redux依赖，然后从redux中引入createStore 。然后在组件树顶层用 store 来 wrap 需要使用此store的组件。

import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";

import "./index.css";
import App from "./App";
import store from "./store/index";

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
);

最后我们想使用时使用 store 的组件中调用这两个钩子函数，useSelector 用来获取组件需要的state 数据。useDispatch 用来获取 dispatch 函数。

import { useSelector, useDispatch } from "react-redux";
import classes from "./Counter.module.css";

const Counter = () => {
  const dispatch = useDispatch();
  const counter = useSelector((state) => state.counter);

  const incrementHandler = () => {
    dispatch({ type: "increment" });
  };
  const decrementHandler = () => {
    dispatch({ type: "decrement" });
  };

  const toggleCounterHandler = () => {};

  return (
    <main className={classes.counter}>
      <h1>Redux Counter</h1>
      <div className={classes.value}>{counter}</div>
      <div>
        <button onClick={incrementHandler}>Increment</button>
        <button onClick={decrementHandler}>Decrement</button>
      </div>
      <button onClick={toggleCounterHandler}>Toggle Counter</button>
    </main>
  );
};
export default Counter;