react-redux

react-redux 是 React 官方提供的用于将 React 组件与 Redux 状态管理库集成的库，下面是一些常用的方法介绍：

1. Provider 组件

它用于将 Redux 的 store 提供给整个 React 应用。一般在应用的根组件处使用，这样应用内的所有组件都可以访问到 store。

import React from 'react';
import ReactDOM from 'react-dom/client';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import rootReducer from './reducers';
import App from './App';

const store = createStore(rootReducer);

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Provider store={store}>
    <App />
  </Provider>
);

2. useSelector 钩子

这是一个 React Hook，用于从 Redux store 中选择并获取数据。在函数式组件里使用它可以获取 store 中的状态。

import React from 'react';
import { useSelector } from 'react-redux';

const MyComponent = () => {
  const counter = useSelector((state) => state.counter);
  return <div>Counter: {counter}</div>;
};

export default MyComponent;

3. useDispatch 钩子

这也是一个 React Hook，用于获取 Redux store 的 dispatch 函数。在函数式组件里使用它可以派发 action。

import React from 'react';
import { useDispatch } from 'react-redux';
import { increment } from './actions';

const MyComponent = () => {
  const dispatch = useDispatch();
  const handleClick = () => {
    dispatch(increment());
  };

  return <button onClick={handleClick}>Increment</button>;
};

export default MyComponent;

4. connect 函数（类组件使用）

在类组件里，可以使用 connect 函数把 React 组件和 Redux store 连接起来。它接收两个参数：mapStateToProps 和 mapDispatchToProps。

import React from 'react';
import { connect } from 'react-redux';
import { increment } from './actions';

class MyComponent extends React.Component {
  render() {
    return (
      <div>
        <p>Counter: {this.props.counter}</p>
        <button onClick={this.props.increment}>Increment</button>
      </div>
    );
  }
}

const mapStateToProps = (state) => ({
  counter: state.counter
});

const mapDispatchToProps = {
  increment
};

export default connect(mapStateToProps, mapDispatchToProps)(MyComponent);

5. shallowEqual 函数

用于比较两个对象是否浅层相等。在 useSelector 中可作为第二个参数传入，从而优化性能，避免不必要的重新渲染。

import React from 'react';
import { useSelector, shallowEqual } from 'react-redux';

const MyComponent = () => {
  const user = useSelector((state) => state.user, shallowEqual);
  return <div>User: {user.name}</div>;
};

export default MyComponent;

这些方法在 react-redux 中是非常常用的，能帮助你更好地将 React 组件和 Redux 状态管理结合起来。

在 React 里，dispatch 是一个重要的概念，常与状态管理库（如 Redux、useReducer 等）搭配使用，其主要作用是发送一个 action 以触发状态更新。下面分别从 useReducer 和 Redux 两个方面进行介绍。

在 useReducer 中的 dispatch

useReducer 是 React 内置的一个 Hook，用来管理复杂的状态逻辑。它返回一个包含当前状态和 dispatch 函数的数组。

import React, { useReducer } from 'react';

// 定义 reducer 函数
const counterReducer = (state, action) => {
    switch (action.type) {
        case 'increment':
            return state + 1;
        case 'decrement':
            return state - 1;
        default:
            return state;
    }
};

const Counter = () => {
    const [count, dispatch] = useReducer(counterReducer, 0);

    return (
        <div>
            <p>Count: {count}</p>
            <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
            <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
        </div>
    );
};

export default Counter;

代码解释

• counterReducer 函数依据接收到的 action 来更新状态。
• useReducer 返回 count（当前状态）和 dispatch 函数。
• 点击按钮时，调用 dispatch 函数并传入一个描述状态更新的 action 对象（包含 type 属性），reducer 函数会依据这个 action 来更新状态。

在 Redux 中的 dispatch

Redux 是一个用于管理 React 应用状态的可预测状态容器。在 React 应用里使用 Redux 时，dispatch 函数可用来触发状态更新。

import React from 'react';
import { useDispatch } from 'react-redux';
import { increment, decrement } from './actions';

const Counter = () => {
    const dispatch = useDispatch();

    return (
        <div>
            <button onClick={() => dispatch(increment())}>Increment</button>
            <button onClick={() => dispatch(decrement())}>Decrement</button>
        </div>
    );
};

export default Counter;

代码解释

• useDispatch 是 react-redux 提供的一个 Hook，用于获取 Redux store 的 dispatch 函数。
• 点击按钮时，调用 dispatch 函数并传入一个 action 创建函数（如 increment() 或 decrement()）返回的 action 对象，Redux store 会依据这个 action 来更新状态。

总结

在 React 里，dispatch 函数的核心作用是发送 action 对象，从而触发状态更新。无论是使用 useReducer 管理局部状态，还是使用 Redux 管理全局状态，dispatch 都是实现状态更新的关键。