React Native(Expo)结合Redux时如何让根组件随状态变更重渲染？

我之前也碰到过类似的坑，你试的几种方法之所以没效果，核心问题是没有让组件正确订阅Redux Store的状态变化，或者没把状态变化同步到组件的props/渲染逻辑里。下面给你说个靠谱的解决思路：

核心方案：用connect高阶组件连接Redux Store #

Redux官方推荐的组件状态同步方式就是通过connect，它会自动帮你的组件订阅Store变化，当目标状态更新时，自动把新状态映射到组件props，触发重新渲染。

步骤1：映射Store状态到组件Props

先写一个mapStateToProps函数，把Store里的语言状态提取出来，作为组件的props：

const mapStateToProps = (state) => {
  return {
    // 这里对应你Store里的language路径，根据你的实际结构调整
    currentLocale: state.language.language
  };
};

步骤2：用connect包裹根组件

把你的根组件和mapStateToProps绑定，确保组件能拿到实时的语言状态：

import React from 'react';
import { connect } from 'react-redux';
import { FormattedWrapper } from '你的国际化库路径';

class RootComponent extends React.Component {
  render() {
    // 直接从props里拿最新的locale，不用手动去Store里取
    const { currentLocale } = this.props;
    return (
      <FormattedWrapper locale={currentLocale} messages={messages}>
        {/* 你的其他页面/组件 */}
      </FormattedWrapper>
    );
  }
}

// 用connect把组件和Store连接起来
export default connect(mapStateToProps)(RootComponent);

步骤3：确保根组件被Provider包裹

别忘了在最外层用Redux的Provider把整个App包裹起来，让所有子组件能访问到Store：

import { Provider } from 'react-redux';
import store from './你的Store文件路径';
import RootComponent from './RootComponent';

export default function App() {
  return (
    <Provider store={store}>
      <RootComponent />
    </Provider>
  );
}

为什么你之前的方法没用？ #

• 构造函数里设本地状态：构造函数只执行一次，后续Store变化不会自动更新本地状态，除非你手动写监听，但容易出错还麻烦。
• 直接用store.getState()：组件不会主动订阅Store变化，就算Store状态变了，组件也感知不到，自然不会重新渲染。
• ComponentWillUpdate里用subscribe：这个生命周期方法里做订阅时机不对，还容易出现内存泄漏，而且手动维护状态同步远不如connect自动处理可靠。

额外注意点 #

1. Reducer必须返回新状态：你的语言Reducer一定要返回新的状态对象，不能直接修改原状态，否则Store不会触发订阅回调：

// 正确的Reducer写法
const initialState = { language: 'en' };
export default function languageReducer(state = initialState, action) {
  switch (action.type) {
    case 'CHANGE_LANGUAGE':
      // 用扩展运算符返回新对象，不要修改原state
      return { ...state, language: action.payload };
    default:
      return state;
  }
}

2. 触发状态变更的动作要正确：切换语言时，要dispatch正确的动作让Reducer更新状态，比如：

// 定义动作创建函数
export const changeLanguage = (locale) => ({
  type: 'CHANGE_LANGUAGE',
  payload: locale
});

// 在组件里触发切换
this.props.dispatch(changeLanguage('zh'));

这样调整后，当你切换语言时，Store状态更新，RootComponent会收到新的currentLocale props，自动重新渲染FormattedWrapper，locale属性也就跟着更新了。

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