How ro re-render everything in React Native

Question

My application has a theme (colors and styles) delivered using the REST API. Whenever a theme changes on the server, the application receives a notification through a socket connection to receive a new theme through REST.

The theme is loaded into Redux itself, and the colors are saved both in the Redux repository (to enable saving to disk) and in the "global" singleton object that I can use everywhere, that is, even unconnected components.

When a new theme arrives, I want to redisplay every element of the application. I managed to redo all the components associated with the repository in a hacker key - by entering a dummy property that changes when a new topic changes.

Is there a way for the forceUpdatewhole application?

Problem areas:

• dumb components (not familiar with topic changes)

• truly intelligent components (store aware, but not aware that they are not redirecting in vain)

Here's an example of a hacker force-re-render reaction-navigation:

myAppContainer.render() {

  <AppRouter
    screenProps={this.props.styling}
  />
}

those. my appcontainer gets this.props.stylingthrough mapStateToProps. Wrapped StackNavigatorgets this through screenProps, which causes the navigator to re-display when the store receives new simulation data.

I do not want to continue this hacker path. Instead, I need a function forceUpdateEverything()that I could call from mine AppContainer. Is there such a thing?

---

Edit the comment for the answer from @bennygenel:

I think Benny describes, in essence, what I did. Changing this.props.styling causes a re-rendering.

​​ "" , . , , , .

immutable.js, , , .

forceUpdate() , , . , .

Answer 1

, , , - . , , .

forceUpdate. , , .

;

, , . render() , React, forceUpdate().

forceUpdate() render() , shouldComponentUpdate(). , shouldComponentUpdate() . DOM, .

forceUpdate() .props this.state render().

, .

// styles.js
const styles = {
  button: {
    blue: {
      backgroundColor: 'blue'
    },
    red: {
      backgroundColor: 'red'
    },
    green: {
      backgroundColor: 'green'
    }    
  }
};

export default styles;

// Dumb component example
import styles from './styles';

const Button = (props) => {
  return <Button {...props} style={[props.style, styles.button[props.theme]]} />
};

// Complex component example
import styles from './styles';

export default Button extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    const {style, theme} = this.props;
    return <Button {...this.props} style={[style, styles.button[theme]]} />
  }
}

// usage in another component
import React, { Component } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Button from './components/Button'; // Custom button component
import styles from './styles';

export default App extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return(
      <View style={styles.container}>
        <Text style={styles.paragraph}>
          Change code in the editor and watch it change on your phone!
          Save to get a shareable url. You get a new url each time you save.
        </Text>
        <Button theme="blue" {/* other Button component props */} />
      </View>
    );
  }
}

, . API .

, / , , theme prop styles.

. .

const styles = {
  id5248698745: {
    button: {
      backgroundColor: 'green'
    },
    label: {
      color: 'yellow',
      fontSize: 18
    },
    paragraph: {
      color: 'red',
      fontSize: 19
    },
    headings: {
      color: 'wihte',
      fontSize: 24
    }
  }
};

// ...
render() {
    const {style, theme} = this.props;
    return <Button {...this.props} style={[style, styles[theme].button]} />
}

// ...
// <Button theme={this.props.themeId} {/* other Button component props */} />

Answer 2

: key . . .