Quartz 4

03使用 connect 连接 Redux 和 React

5 min read

下面是一个使用 react-redux 中 connect 函数的示例，它展示了如何将 Redux 状态和 dispatch 方法连接到 React 组件中。在这个例子中，我们通过 connect 来访问 Redux 状态并在组件中触发 action。

完整 Demo：使用 connect 连接 Redux 和 React

1. 项目结构

src/
|-- actions/
|   |-- counterActions.js
|-- reducers/
|   |-- counterReducer.js
|-- store/
|   |-- store.js
|-- components/
|   |-- Counter.js
|-- App.js
|-- index.js

2. 安装依赖

确保安装了 redux 和 react-redux：

npm install redux react-redux

3. 创建 Action

在 src/actions/counterActions.js 文件中定义 increment 和 decrement 的 action creators，用于增加和减少计数。

// src/actions/counterActions.js
 
// 定义常量
export const INCREMENT = 'INCREMENT';
export const DECREMENT = 'DECREMENT';
 
// 增加计数的 action creator
export const increment = () => ({
  type: INCREMENT,
});
 
// 减少计数的 action creator
export const decrement = () => ({
  type: DECREMENT,
});

4. 创建 Reducer

在 src/reducers/counterReducer.js 中，定义一个 counterReducer，用于处理 INCREMENT 和 DECREMENT 操作。

// src/reducers/counterReducer.js
 
import { INCREMENT, DECREMENT } from '../actions/counterActions';
 
// 初始状态
const initialState = {
  count: 0,
};
 
// 定义 reducer
const counterReducer = (state = initialState, action) => {
  switch (action.type) {
    case INCREMENT:
      return {
        ...state,
        count: state.count + 1,
      };
    case DECREMENT:
      return {
        ...state,
        count: state.count - 1,
      };
    default:
      return state;
  }
};
 
export default counterReducer;

5. 配置 Redux Store

在 src/store/store.js 中，使用 createStore 创建 Redux store，并引入 counterReducer。

// src/store/store.js
 
import { createStore } from 'redux';
import counterReducer from '../reducers/counterReducer';
 
// 创建 Redux store
const store = createStore(counterReducer);
 
export default store;

6. 使用 connect 连接 Redux 和 React 组件

在 src/components/Counter.js 中，使用 connect 将 Redux 状态和 dispatch 连接到组件中。

// src/components/Counter.js
 
import React from 'react';
import { connect } from 'react-redux';  // 导入 connect
import { increment, decrement } from '../actions/counterActions';  // 导入 actions
 
const Counter = ({ count, increment, decrement }) => {
  return (
    <div>
      <h1>Counter: {count}</h1>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
};
 
// mapStateToProps：从 Redux store 获取 state
const mapStateToProps = (state) => ({
  count: state.count,  // 获取 counter 的值
});
 
// mapDispatchToProps：绑定 dispatch 到组件的 props
const mapDispatchToProps = {
  increment,  // 绑定 dispatch
  decrement,  // 绑定 dispatch
};
 
// 使用 connect 连接 Redux 状态和 dispatch
export default connect(mapStateToProps, mapDispatchToProps)(Counter);

7. 配置 Redux 和 React

在 src/index.js 中，使用 Provider 将 Redux store 注入到整个应用中。

// src/index.js
 
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store/store';  // 引入 Redux store
import App from './App';
 
ReactDOM.render(
  <Provider store={store}>  {/* 用 Provider 包裹应用，传入 Redux store */}
    <App />
  </Provider>,
  document.getElementById('root')
);

8. 主组件

在 src/App.js 中使用 Counter 组件。

// src/App.js
 
import React from 'react';
import Counter from './components/Counter';
 
const App = () => {
  return (
    <div>
      <h1>Redux Counter Example</h1>
      <Counter />
    </div>
  );
};
 
export default App;

9. 运行效果

  1. 页面初始状态会显示 Counter: 0。
  2. 用户点击 Increment 按钮，count 增加 1。
  3. 用户点击 Decrement 按钮，count 减少 1。

10. 数据流转流程

  1. 用户点击 Increment 按钮：触发 increment action，通过 mapDispatchToProps 触发 dispatch 更新 Redux 状态。
  2. Redux store 更新：counterReducer 接收到 INCREMENT action，更新 count 状态。
  3. 组件渲染更新：通过 mapStateToProps，Counter 组件会重新渲染并显示新的 count 值。
  4. 用户点击 Decrement 按钮：触发 decrement action，dispatch 更新 Redux 状态，组件重新渲染。

11. 总结

这个示例展示了如何通过 connect 函数将 Redux 的状态（count）和 dispatch 方法（increment 和 decrement）连接到 React 组件中。

数据流转总结

  1. 用户点击按钮：触发对应的 action（increment 或 decrement）。
  2. Redux 更新状态：通过 counterReducer 更新 count 状态。
  3. 组件重新渲染：Counter 组件通过 mapStateToProps 读取最新的 count，并显示在页面上。

通过 connect 的 mapStateToProps 和 mapDispatchToProps，我们将 Redux 的状态和 dispatch 方法注入到组件中，使得组件能够访问并更新 Redux 中的状态。

Graph View