Мне нужно обновить файл с моим общим стилем, основанным на избыточном состоянии

Question

У меня есть файл со всеми моими родовыми стилями (styles.js), такими как основной цвет, вторичный цвет, оттенок серого и другие.

Когда пользователь входит в систему, у меня есть его основной и дополнительный цвет в моем состоянии редукции.

Что я хочу: когда этот реквизит в моем обновлении состояния редукции, мне нужно, чтобы мои styles.js услышали об этом изменении и обновили все места, которые ссылаются на этот основной и дополнительный цвет.

Я сделал это и не работает. Кажется, что styles.js никогда не обновляется.

my styles.js:

import store from 'store';

//here I check if my primaryColor is undifined, if it is, I set the default colors. (The app is always with this deafult color, but if I check my redux state the colors is being updated)
const pColor = !store.getState().login.data.primaryColor ? '#386B38' : store.getState().login.data.primaryColor;
const sColor = !store.getState().login.data.secondaryColor ? '#666' : store.getState().login.data.secondaryColor;

export default {
  white: '#FFF',
  lighter: '#EEE',
  light: '#DDD',
  regular: '#999',
  dark: '#666',
  darker: '#333',
  black: '#000',

  primary: pColor, //these are the props to be updates
  secondary: sColor, 
  success: '#9DCA83',
  danger: '#E37A7A',


  transparent: 'transparent',
  darkTransparent: 'rgba(0, 0, 0, 0.6)',
  whiteTransparent: 'rgba(255, 255, 255, 0.3)',
};

Компонент входа, например:

import React, { Component } from 'react';

import { View } from 'react-native';

import styles from 'stylesLogin'; //this is my specific style to use in login

export default class Login extends Component {
  render() {
    return (
      <View style={styles.pColorView} />
      <View style={styles.sColorView} />
    );
  }
}

stylesLogin.js

import { StyleSheet } from 'react-native';
import { colors } from 'styles'; //this is my generic styles, where I have my primary and secondary color

const styles = StyleSheet.create({
  pColorView:{
    backgroundColor: colors.primaryColor,
  },
  sColorView:{
    backgroundColor: colors.secondaryColor,
  }
});

export default styles;

Answer 1

В идеале вы должны создать состояние в редукторе, например state.styles, и установить для него initialState в качестве стилей по умолчанию , как описано

const initialState = {
    primary: // primary default,
    secondary: // secondary default,
}

свяжите их в редуктор и обновите их.

С помощью вспомогательной функции redux connect() создайте хранилище с учетом HOC и привязайте стили непосредственно к props

import {connect} from 'react-redux'


class Login extends Component {
    render() {
        const {pColor, sColor} = this.props
        return (
            <View style={{backgroundColor: pColor}} />
            <View style={{backgroundColor: sColor}} />
    );
    }
}


const mapStateToProps = state = ({
    pColor: state.styles.primary,
    sColor: state.styles.secondary
})

export default connect(mapStateToProps, null)(Login)

Answer 2

Подход, который вы попробовали, не должен работать.

Как я вижу, вы хотите обновить основной и дополнительный внутри styles.js

Попробуйте это Сначала импортируйте стили из from styles.js ’в файле действий

Тогда В ваших действиях, когда вход в систему будет успешным, внесите следующие изменения

styles.primary = ‘red’ // anycolor styles.secondar = ‘blue’

Если вы не видите изменений, попробуйте выполнить навигацию, поскольку вашему компоненту необходимо обновить до нового измененного стиля импорта.