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

Question

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

我正在尝试让 <FormattedWrapper locale='en' messages={messages}> 在状态更改时更新 "locale"。我试图在构造函数中有一个局部状态，使用 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;

在此先感谢您的帮助！ :)

Answer 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/>

创建 连接组件

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

How to get root component to re-render in react-native with redux (Open source project)

open-source

react-native

react-redux

expo