面试题：React中Redux如何管理React组件状态

1. Redux核心概念

Store：
- 整个应用的状态（state）都存储在一个单一的对象树中，这个对象树保存在store中。
- store提供了几个关键方法，如getState()获取当前状态，dispatch(action)分发action以更新状态，subscribe(listener)注册监听器以便在状态变化时执行特定逻辑。
Action：
- 是一个普通的JavaScript对象，用于描述发生了什么事情。它必须有一个type字段来表示动作的类型，通常是一个字符串常量。例如：{ type: 'ADD_TODO', payload: 'Learn Redux' }，payload是携带的数据，非必需。
- Action是把数据从应用传到store的有效载荷，是store数据的唯一来源。
Reducer：
- 是一个纯函数，接收先前的状态（previous state）和一个action作为参数，返回一个新的状态。例如：

function counterReducer(state = 0, action) {
    switch (action.type) {
        case 'INCREMENT':
            return state + 1;
        case 'DECREMENT':
            return state - 1;
        default:
            return state;
    }
}

- Reducer根据action的`type`来决定如何更新状态，不能直接修改状态，必须返回新的状态。

2. 在React项目中引入Redux进行状态管理的基本流程

安装Redux及React - Redux：在项目目录下运行npm install redux react - redux或yarn add redux react - redux。
创建Reducer：编写处理不同action的reducer函数，将多个reducer合并为一个根reducer。例如，使用combineReducers方法：

import { combineReducers } from'redux';
function userReducer(state = {}, action) {
    // 处理用户相关action
    return state;
}
function productReducer(state = [], action) {
    // 处理产品相关action
    return state;
}
const rootReducer = combineReducers({
    user: userReducer,
    product: productReducer
});

创建Store：使用createStore方法创建store，并传入根reducer。

import { createStore } from'redux';
import rootReducer from './reducers';
const store = createStore(rootReducer);

在React应用中使用Redux：使用Provider组件将store传递给整个React应用。在index.js中：

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')
);

连接组件到Redux：在需要使用Redux状态或分发action的组件中，使用connect（React - Redux旧版本）或useSelector、useDispatch（React - Redux新版本基于hooks）。
- 旧版本（connect）：

import React from'react';
import { connect } from'react - redux';
function Counter({ count, increment }) {
    return (
        <div>
            <p>Count: {count}</p>
            <button onClick={increment}>Increment</button>
        </div>
    );
}
const mapStateToProps = state => ({
    count: state.counter
});
const mapDispatchToProps = dispatch => ({
    increment: () => dispatch({ type: 'INCREMENT' })
});
export default connect(mapStateToProps, mapDispatchToProps)(Counter);

- **新版本（hooks）**：

import React from'react';
import { useSelector, useDispatch } from'react - redux';
function Counter() {
    const count = useSelector(state => state.counter);
    const dispatch = useDispatch();
    const increment = () => dispatch({ type: 'INCREMENT' });
    return (
        <div>
            <p>Count: {count}</p>
            <button onClick={increment}>Increment</button>
        </div>
    );
}
export default Counter;

3. 协同工作流程

组件发起Action： React组件通过dispatch方法分发action。例如，点击按钮时调用dispatch({ type: 'INCREMENT' })。
Store接收并传递Action给Reducer： store接收到action后，将当前状态和action传递给reducer。
Reducer计算新状态： reducer根据action的type计算并返回新的状态。
Store更新状态： store使用reducer返回的新状态更新自己的状态树。
组件重新渲染：连接到store的组件检测到状态变化（通过subscribe机制），触发重新渲染，展示最新的状态。

星途面试题库

面试题：React中Redux如何管理React组件状态

知识考点

面试题答案

1. Redux核心概念

2. 在React项目中引入Redux进行状态管理的基本流程

3. 协同工作流程