如何使用 redux 让根组件在 react-native 中重新渲染（开源项目）

Posted 2023-02-19

【中文标题】如何使用 redux 让根组件在 react-native 中重新渲染（开源项目）

【英文标题】：How to get root component to re-render in react-native with redux (Open source project)

【发布时间】：2018-09-13 11:52:47

【问题描述】：

在使用 redux 时，如何让 React-Native (Expo.io) 中的根组件在状态更改时重新渲染？

我正在尝试让<FormattedWrapper locale='en' messages=messages> 在状态更改时更新“语言环境”。 我试图在构造函数中有一个本地状态，使用 store.getState().language.language，有一个局部变量，由于来自 redux 的订阅功能，它在 ComponentWillUpdate 中得到了更新，但没有任何效果。

我已经清理了所有内容并为我想要贡献的 repo 做了一个 PR：https://github.com/ipeedy/react-native-boilerplate/pull/3

App.js 代码在这里：

import React,  Component  from 'react';
import  StatusBar, Platform  from 'react-native';
import  Provider  from 'react-redux';
import  ThemeProvider  from 'styled-components';
import styled from 'styled-components/native';
import  FormattedWrapper  from 'react-native-globalize';

import messages from './Messages';
import store from './store';

import Navigator from './Navigator';
import  colors  from './utils/constants';

const Root = styled.View`
  flex: 1;
  background-color: $props => props.theme.PINK_50;
`;

const StatusBarandroid = styled.View`
  height: 24;
  background-color: $props => props.theme.PINK_200;
`;

class App extends Component 
  render() 
    return (
      <Provider store=store>
        <ThemeProvider theme=colors>
                  <FormattedWrapper locale='en' messages=messages>
            <Root>
              <StatusBar barStyle='light-content' backgroundColor='transparent' translucent />
               Platform.OS === 'android' && Platform.Version >= 20 ? <StatusBarAndroid /> : null 
            <Navigator />
          </Root>
                    </FormattedWrapper>
        </ThemeProvider>
      </Provider>
    );
  


export default App;

提前感谢您的帮助！ :)

【参考方案1】：

由于您已经使用react-redux，因此您可以使用同一个库的connect 函数。

由于 Connect 需要您正在使用的组件的新实例，因此可以如下所示完成。

首先，您需要为您的提供程序中的内容创建一个单独的组件，并将 connect 与商店一起使用

例如根据我对您的代码的理解

import  Provider, connect  from 'react-redux';

class RootContainer extends Component 
  render() 
    const locale = this.props
    return (
        <ThemeProvider theme=colors>
                  <FormattedWrapper locale=locale messages=messages>
            <Root>
              <StatusBar barStyle='light-content' backgroundColor='transparent' translucent />
               Platform.OS === 'android' && Platform.Version >= 20 ? <StatusBarAndroid /> : null 
            <Navigator />
          </Root>
                    </FormattedWrapper>
        </ThemeProvider>
    );
  


const mapState = state = (
   locale: state.language.language
)

ConnectedRootContainer =  connect(mapState, null)(RootContainer);

class App extends Component 
  render() 
    return (
      <Provider store=store>
        <ConnectedRootContainer/>
      </Provider>
    );
  


export default App;

或者另一种简单的方法就是为<FormattedWrapper/>制作连接组件