Dynamically adjust color scheme in JavaScript file based on Redux store value

Other Questions JavaScript
1

I’m working on a React Native app with Redux and I need some help. I’ve got a palette.js file that defines color schemes. Here’s what it looks like now:

const Palette = {
  primaryDark: '#A23B4C',
  primary: '#B45D6E',
  primaryLight: '#C57F8D',
}

export default Palette;

The thing is, my client wants different colors for different user types. I’m storing the user type in Redux as 'userType: ‘0’ or ‘1’. For type ‘0’, the colors stay the same. But for type ‘1’, I need to change them.

I don’t want to change a bunch of files, so I’m thinking I should add some logic to palette.js. The problem is, it’s not a React component, so I’m not sure how to access the Redux store from there.

In my components, I use the colors like this:

import Palette from '../utils/palette';

const styles = StyleSheet.create({
  wrapper: {
    backgroundColor: Palette.primary,
  },
  text: {
    color: Palette.primaryDark,
  },
});

And I get the user type like this:

const userType = useSelector(state => state.user.userType);

How can I make palette.js aware of the user type from Redux? Any ideas?

2

Have you considered using a Higher Order Component (HOC) to handle this? It’s a neat solution that doesn’t require changing your palette.js file. Here’s how it could work:

Create a withDynamicPalette HOC that wraps your components. This HOC can access the Redux store, determine the user type, and pass the appropriate color scheme as props.

In your palette.js, define color schemes for both user types. Then in your components, instead of importing palette directly, use the HOC. It’ll inject the right colors based on the user type.

This approach keeps your palette.js simple and your components clean. It also centralizes the color logic, making future changes easier. Just remember to wrap your components with the HOC where you need dynamic colors.

It’s a bit more setup initially, but it pays off in maintainability and scalability.

3

I’ve faced a similar challenge in one of my projects. Instead of trying to access Redux directly from palette.js, I’d suggest creating a custom hook that integrates the Redux state with your color logic.

Here’s a concise approach: keep palette.js as a simple object with your color definitions, then create a custom hook (for example, useColorScheme.js) like this:

import { useSelector } from 'react-redux';
import Palette from './palette';

export const useColorScheme = () => {
  const userType = useSelector(state => state.user.userType);
  
  return userType === '1' ? Palette.alternateScheme : Palette.defaultScheme;
};

In your components, instead of importing Palette directly, use the hook to get the appropriate scheme:

import { useColorScheme } from '../hooks/useColorScheme';

const MyComponent = () => {
  const colors = useColorScheme();
  
  const styles = StyleSheet.create({
    wrapper: {
      backgroundColor: colors.primary,
    },
    text: {
      color: colors.primaryDark,
    },
  });
  
  // Further component code here
};

This method keeps your palette.js file clean and lets you switch colors based on the Redux state without needing to modify multiple files.

4

hey, have u tried using context API? it could solve ur problem without messing with palette.js. create a colorContext with a provider that checks Redux state and gives the right colors. then use useContext in ur components to grab colors. it’s pretty simple to set up and keeps things clean. just a thought!