面试题：React 列表条件渲染与状态管理的深度结合

实现思路

Redux 部分：
- Action：定义不同的 action 类型，用于描述用户在不同页面的操作。这些操作会触发状态的改变。例如，用户点击某个按钮可能触发 UPDATE_LIST_STATUS 动作，携带相关数据（如列表项的 ID 或其他条件）。
- Reducer：根据接收到的 action，更新 Redux store 中的列表状态。例如，当接收到 UPDATE_LIST_STATUS 动作时，根据携带的数据修改列表项的某个属性，这个属性将用于条件渲染。
React 组件部分：
- 连接 Redux：使用 react - redux 库的 connect 方法（或者新的 useSelector 和 useDispatch hooks）将 React 组件与 Redux store 连接起来，以便组件可以获取 store 中的列表数据，并分发 action。
- 条件渲染：在组件的 render 方法（或者函数式组件的返回部分）中，根据从 Redux store 获取的列表项的状态，使用 JavaScript 的条件语句（如 if - else 或 && 运算符）来决定是否渲染某个列表项。

核心代码示例

Redux 相关代码
- actions.js

// 定义 action 类型
const UPDATE_LIST_STATUS = 'UPDATE_LIST_STATUS';

// action 创建函数
export const updateListStatus = (id, newStatus) => ({
    type: UPDATE_LIST_STATUS,
    payload: { id, newStatus }
});

- **reducers.js**

const initialState = {
    list: [
        { id: 1, status: 'inactive' },
        { id: 2, status: 'inactive' }
    ]
};

const listReducer = (state = initialState, action) => {
    switch (action.type) {
        case UPDATE_LIST_STATUS:
            return {
               ...state,
                list: state.list.map(item =>
                    item.id === action.payload.id? {
                       ...item,
                        status: action.payload.newStatus
                    } : item
                )
            };
        default:
            return state;
    }
};

export default listReducer;

- **store.js**

import { createStore } from'redux';
import listReducer from './reducers';

const store = createStore(listReducer);

export default store;

React 组件代码
- ListComponent.js

import React from'react';
import { useSelector, useDispatch } from'react - redux';
import { updateListStatus } from './actions';

const ListComponent = () => {
    const list = useSelector(state => state.list);
    const dispatch = useDispatch();

    const handleClick = (id) => {
        // 模拟操作，更新列表项状态
        dispatch(updateListStatus(id, 'active'));
    };

    return (
        <div>
            {list.map(item => (
                item.status === 'active' && (
                    <div key={item.id}>
                        {item.id} - {item.status}
                        <button onClick={() => handleClick(item.id)}>
                            点击更新状态
                        </button>
                    </div>
                )
            ))}
        </div>
    );
};

export default ListComponent;

在应用入口处连接 Redux 和 React
- index.js

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

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

面试题：React 列表条件渲染与状态管理的深度结合

知识考点

面试题答案

实现思路

核心代码示例