Redux跨组件状态修改求助：Footer无法访问并修改Layout状态

你的代码存在多处Redux使用和组件写法错误，导致Footer无法访问状态、无法触发状态修改，以下是具体问题和修复方式：

1. Reducer 错误 #

• 初始状态未正确定义：state = focusedTab里的focusedTab是未定义变量，需直接设置初始状态对象
• Action 参数读取错误：action传递的是payload，但reducer错误读取action.id，应改为action.payload
• 状态更新未保留原有状态：当前reducer直接替换整个state对象，后续新增状态会丢失，需展开原有状态再修改目标字段

修正后的reducer.js：

// 定义初始状态
const initialState = {
  focusedTab: 123
};

function reducer(state = initialState, action) {
    switch (action.type) {
      case "change/id":
        // 展开原有状态，仅修改目标字段
        return {
          ...state,
          focusedTab: action.payload
        };
      default:
        return state;
    }
}
export default reducer;

2. Layout 组件错误 #

• Class组件状态写法错误：类组件不能直接在类体里写this.state = ...，改用类字段语法（去掉this）或在constructor中初始化
• 混淆本地状态与Redux状态：你在Layout里定义了本地state.id，但Redux状态的字段是focusedTab，不是id，需统一用Redux管理状态
• mapStateToProps 未返回对象：该函数必须返回对象，将Redux状态映射到组件props

修正后的Layout.js：

import { Component } from 'react';
import { connect } from 'react-redux';
import Footer from './Footer';

export class Layout extends Component {
    // 类字段语法定义本地状态（若无需求可删除）
    state = {};

    render() {
        // 从props获取Redux中的状态
        const { id } = this.props;
        return (
            <div>
                <p>当前ID: {id}</p>
                <Footer />
            </div>
        );
    }
}

// 将Redux的focusedTab映射为组件props的id
function mapStateToProps(state) {
    return {
        id: state.focusedTab
    };
}

// 无需自定义mapDispatchToProps时，可传入null或省略
export default connect(mapStateToProps, null)(Layout);

3. Footer 组件错误 #

• 未正确使用Redux Hooks：函数组件需用useSelector获取状态，用useDispatch获取dispatch函数，你直接调用useDispatch.dispatch是错误写法
• 未定义id变量：需通过useSelector从Redux获取状态，不能直接使用未定义的id
• 需确保Footer在Redux Provider范围内：整个应用必须被<Provider store={store}>包裹，否则组件无法访问Redux store

修正后的Footer.js：

import { useSelector, useDispatch } from 'react-redux';
import { actionFunction } from './action';

export function Footer() {
    // 从Redux获取状态
    const id = useSelector(state => state.focusedTab);
    // 获取dispatch函数
    const dispatch = useDispatch();

    const foo = () => {
        console.log("test " + id);
        // 触发action修改状态
        dispatch(actionFunction(456));
    }

    return(<button onClick={foo}>Click me</button>);
}

4. 额外必做配置 #

确保入口文件（如index.js）用Redux Provider包裹整个应用：

import { Provider } from 'react-redux';
import { createStore } from 'redux';
import reducer from './reducer';
import Layout from './Layout';

const store = createStore(reducer);

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

内容的提问来源于stack exchange，提问作者koonig