CODEWITHSUNDEEP
javascriptreactjsreduxreact-redux
Dilhan Bhagat
Dilhan Bhagat

Reputation: 49

React-Redux: How to add each item from array

My Current implementation of dispatch

I have tried to dispatch items by mapping but sometimes Redux gives an undefined error so I want to try a better way in the reducer.

const dispatch = useDispatch()
const mapCheck =  [
    "Math",
    "Spanish",
    "Clean garden",
]

mapCheck.map(c=>dispatch(createCustomList(c.val)))

What I am trying to do

I am trying to get each individual Item from an array to dispatch but I am getting this output I have a todo list in which I dispatch an array as shown below:

My Reducer

import { CUSTOM_LIST } from "../actions/shoppingList";

const initialState = { 
    myCustomItems: []
};

const ToDoReducer = (state = initialState, action) => {
    switch (action.type) {
        case CUSTOM_LIST:
            const customList = { id: Date.now(),val: action.custom.custom};

            const custom = state.myCustomItems.concat(customList);

            const existingCustomItem = state.myCustomItems.findIndex(
                item => item.val === action.custom.custom
            );
            if (existingCustomItem >= 0) {
                return {...state, myCustomItems: state.myCustomItems}
            } else {
                return {...state,myCustomItems: custom};
            }
        default:
            return state;
    }
};

export default ToDoReducer;

Desired Output

How do I map each item and add them with an id as shown below in the desired output. Don't worry about the id that is just Date.now()

desired output:

const DesiredOutput = [{
        "id": "qm6a67ci",
        "val": "Math",
    },
    {
        "id": "qm6a62ci",
        "val": "Spanish",
    },
    {
        "id": "rkrkmroepe",
        "val": "Clean garden",
    }
]

Upvotes: 2

Views: 437

Answers (1)

Vipin Yadav
Vipin Yadav

Reputation: 1113

Please use the below code. Hope it will fix your issue.

import { CUSTOM_LIST } from "../actions/shoppingList";

const initialState = { 
    myCustomItems: []
};

const ToDoReducer = (state = initialState, action) => {
    switch (action.type) {
        case CUSTOM_LIST:
            const customList = { id: Date.now(),val: action.custom.custom};

            const existingCustomItem = state.myCustomItems.findIndex(
                item => item.val === action.custom.custom
            );
            if (existingCustomItem > -1) {
                return {...state, myCustomItems: state.myCustomItems}
            } else {
                return {...state,myCustomItems: [...state.myCustomItems,customList ]};
            }
        default:
            return state;
    }
};

export default ToDoReducer;

OR second way you can do is, instead of dispatching multiple actions you can dispatch a single action

The below code will remove duplicated from the array so you don't have to put a condition in your reducer

const dispatch = useDispatch()
const mapCheck =  [
    "Math",
    "Spanish",
    "Clean garden",
]

dispatch(createCustomList[...new Set(mapCheck)]))

Reducer file

import { CUSTOM_LIST } from "../actions/shoppingList";

const initialState = {
  myCustomItems: [],
};

const ToDoReducer = (state = initialState, action) => {
  switch (action.type) {
    case CUSTOM_LIST:
      return {
        ...state,
        myCustomItems: action.customList.map((val) => ({
          id: Date.now(),
          val,
        })),
      };

    default:
      return state;
  }
};

export default ToDoReducer;

Upvotes: 2

Related Questions