It's not really clear if you mean unique brands by cart or products, but it shouldn't change the patterns you'll use to solve this.
First assuming the product list isn't changing, you can simply add them as part of the initial state.
const ALL_PRODUCTS = [
{ id: 1, brand:"DNMX" },
{ id: 2, brand: "Aeropostale" },
{ id: 3, brand: "AJIO" },
{ id: 4, brand: "Nike" }
];
const distinct = (array) => Array.from(new Set((array) => array.map((x) => x.brand)).entries());
const ALL_BRANDS = distinct(ALL_PRODUCTS.map((x) => x.brand));
const INITIAL_STATE = {
products: ALL_PRODUCTS,
cart: [],
brands: ALL_BRANDS,
currentProduct: null,
};
If you will have an action that will add a new products and the brands have to reflect that you just apply the above logic during the state updates for the products.
const reducer = (state = INITIAL_STATE, action) => {
switch(action.type) {
case (action.type === "ADD_PRODUCT") {
const products = [...state.products, action.product];
return {
...state,
products,
brands: distinct(products.map((x) => x.brand))
}
}
}
return state;
};
Now for the idiomatic way. You might note that brands can be considered derived from the products collection. Meaning we probably dont even need it in state since we can use something called a selector to create derived values from our state which can greatly simplify our reducer/structure logic.
// we dont need brands in here anymore, we can derive.
const INITIAL_STATE = {
products: ALL_PRODUCTS,
cart: [],
currentProduct: null;
};
const selectAllBrands = (state) => {
return distinct(state.products.map((x) => x.brand))
};
Now when we add/remove/edit new products we no longer need to update the brand slice. It will be derived from the current state of products. On top of all of that, you can compose selectors just like you can with reducers to get some really complex logic without mucking up your store.
const selectCart = (state) => state.cart;
const selectAllBrands = (state) => {...see above}
const selectTopBrandInCart = (state) => {
const cart = selectCart(state);
const brands = selectBrands(brands);
// find most popular brand in cart and return it.
};
I would highly recommend you check out reselect to help build composable and performant selectors.