面试题：React中如何在Hooks组件中集成Redux

安装必要的库：
- 首先需要安装react - redux和redux。在项目根目录下运行以下命令：
```
npm install react - redux redux
```
创建store：
- 在项目的src目录下，创建一个store文件夹（可以自定义路径）。
- 在store文件夹中创建一个index.js文件。
- 在index.js中，导入createStore函数（从redux库），以及根reducer（如果还未创建，需要先定义reducer，reducer是一个纯函数，根据不同的action返回不同的状态）。例如：
```
import { createStore } from'redux';
import rootReducer from './reducers';//假设根reducer路径为./reducers

const store = createStore(rootReducer);

export default store;
```

连接组件到store：

在使用Redux状态的React组件文件中，导入useSelector和useDispatch钩子（从react - redux库）。
useSelector用于从store中获取状态。例如：

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

const MyComponent = () => {
  const count = useSelector(state => state.count);//假设state中有count字段
  return (
    <div>
      <p>Count: {count}</p>
    </div>
  );
};

export default MyComponent;

useDispatch用于分发action，从而更新store中的状态。例如：

import React from'react';
import { useSelector, useDispatch } from'react - redux';
import { increment } from './actions';//假设increment action creator路径为./actions

const MyComponent = () => {
  const count = useSelector(state => state.count);
  const dispatch = useDispatch();
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => dispatch(increment())}>Increment</button>
    </div>
  );
};

export default MyComponent;

另外，在应用的入口文件（通常是index.js）中，需要使用Provider组件将整个应用包裹起来，使其能够访问store。例如：

import React from'react';
import ReactDOM from'react - dom';
import { Provider } from'react - redux';
import store from './store';
import App from './App';

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

星途面试题库

面试题：React中如何在Hooks组件中集成Redux

知识考点

面试题答案