React-Redux: How to add each item from array

Question

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",
    }
]

is it your question: how to get DesiredOutput array from mapCheck array ? — Ahmad MOUSSA
– Ahmad MOUSSA, Commented Oct 20, 2020 at 15:12
No my question is a better way to map each item in an array from the reducer itself instead of doing it while dispatching — Dilhan Bhagat
– Dilhan Bhagat, Commented Oct 20, 2020 at 15:25

Vipin Yadav · Accepted Answer · 2020-10-20 15:32:49Z

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;

Collectives™ on Stack Overflow

React-Redux: How to add each item from array

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related