Javascript 我需要根据redux状态用我的通用样式更新一个文件

我有一个包含所有通用样式（styles.js）的文件，比如原色、副色、灰色阴影和其他东西

当用户登录时，我的主颜色和次颜色都处于我的redux状态

我想要的是：当我的redux状态中的道具更新时，我需要我的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} />
    );
  }
}

---

你尝试的方法不应该奏效

正如我所看到的，您希望在styles.js中更新主样式和次样式

试试这个 首先从操作文件中的“styles.js”导入样式

然后 当用户登录成功时，在您的操作中进行如下更改

styles.primary='red'//anycolor style.secondar='blue'

---

如果看不到更改，请尝试导航，因为您的组件需要刷新以新导入更改的样式。

理想情况下，您应该在缩减器中设置状态，例如

state.styles

，并将

initialState

设置为默认样式，如前所述

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

在减速器中绑定并更新它们

借助redux helper函数，制作一个商店感知HOC，并将样式直接绑定到

道具上

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)

从'react redux'导入{connect}
类登录扩展组件{
render（）{
const{pColor，sColor}=this.props
返回(
);
}
}
常量mapStateToProps=状态=({
pColor:state.styles.primary，
sColor:state.styles.secondary
})
导出默认连接（MapStateTops，null）（登录）

请至少向我们展示一些您的工作，以便我们帮助您better@RexLow请检查一下现在是否好些了。谢谢目前，组件只接收一次状态，这就是它不会更新的原因。相反，您应该在导出组件之前尝试使用样式

或
连接组件。查看
react-redux
bindings。我是这样做的，但更改并没有反映在我的所有应用程序中。
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)