Redux 全局变量

#1

（新人）公司项目里面有皮肤需求
自己写了一点点

import React from 'react';
import {connect} from 'react-redux';

var mapStates = (state)=>{
  return{
    themeColor:state.themeColor
  }
}
var tbzColor ={};
function initColor({themeColor}){
  const Color = require('../lib/color')
  var color = Color(themeColor);
  var value = color.getValue(),  //明度
      saturation = color.getSaturation(), //饱和度
      hue = color.getHue(),   //色相
      lightness = color.getLightness();  //亮度
  tbzColor.bgColor = color.toCSS();
  tbzColor.bgDark = color.darkenByRatio(.5).toCSS();
  tbzColor.fontColor = (lightness>0.75&&value>.78)||(value>.9&&hue>50&&hue<180)?'#3f4652':'#fff';
  var styles = {
    color:{
      color:tbzColor.fontColor,
      background:tbzColor.bgColor
    },
    bg:{
      color:tbzColor.bgDark
    }
  }
  console.log(styles,'.....')
  return (
    <div>
      <div style={styles.color}>{themeColor}</div>
      <div style={styles.bg}>{themeColor}</div>
    </div>
  )
}
var Color = connect(mapStates)(initColor);
export {Color,tbzColor}

瞎写的，全局变量咋写呀。。。。。。。。。

#2

window.themeColor = themeColor :laughing:

#3

全局变量放store里面好了。。

#5

性能太差了吧

#6

看一下代码，themeColor已经放到store里面了，需求是主题色的系列颜色，能够根据store的主题色，计算一次后，全局引用

#7

使用store去计算，性能更低。

#8

我明白你意思，你再弄个reducer里面可以根据store已经存放的的主题色state，计算出来你需要的颜色state，同样也是放在store里面然后暴露给各种containers就行了，但诚如楼下所说，使用store计算这个方法不一定好，你可以测一下用window.xxx和reducer里面用store计算的性能

#9

系列颜色由主题色计算出来，再把这些放到store就违背redux的设计原理了，我订阅了这个主题色就算解决问题了，谢谢你的回答

#10

您太客气，你说得对，直接在reducer里面计算违背设计初衷，其实想起我以前的写过的例子，也可以在mapStateToProps里面做文章，多暴露一个经过你自己计算之后的props：state的K.V对，K值就是你要传的主题色，V里面你安装你的计算规则进行处理，然后通过传入containers 后来我在vue的getters里面也这样做过，原理也差不多。
另外我想请教一下你是怎么通过订阅解决这个问题的，我以前学过Rxjs的订阅但已经很生疏了

#11

redux 全局变量肯定是可变化，如果赋给window，还要自己监听属性变化，设计上也不科学，不可取呀

#12

mapState和vue的getter或者计算属性不太适合全局属性，订阅很简单，store.discribe()一个函数，函数里取当前store的状态，计算相关颜色就可以了

#13

恩恩，这个可以有，感谢- -