We Keep Coding

How to optimize update of object array in useReducer?

I have a data structure that is like this:
const dataObj = {
myparam: 'Hello',
data: [
{
id: 1, checked: false
},
{
id: 2, checked: true
}
{
id: 3, checked: false
}
]
}
I have been experimenting with useReducer since I wanted to update my arrayList so that when I send in my payload I could change the object with id 1 to be checked/unchecked.
I solved this by doing this:
const reducer = (state: StateType, action: Action) => {
const { type, payload } = action;
let newArrayChecked: Array<DataItems> = [];
let newArrayUnchecked: Array<DataItems> = [];
switch (type) {
case ActionKind.Checked:
newArrayChecked = state.items.map((item) => {
const it = item;
if (item.id === payload.id) it.checked = true;
return it;
});
return {
...state,
items: newArrayChecked,
};
case ActionKind.UnChecked:
newArrayUnchecked = state.items.map((item) => {
const it = item;
if (item.id === payload.id) it.checked = false;
return it;
});
return {
...state,
items: newArrayUnchecked,
};
default:
return state;
}
};
Im not so happy about this since for starters its repetative code more or less and looks ugly.
Im wondering if there is a better way to do this with useReducer? Im fairly new to this Hook and looking for code optimazation.

You just update like this:
case ActionKind.Checked:
newArrayChecked = state.items.map((item) => {
return {
...item,
checked: item.id === payload.id ? true: item.checked
};
});
return {
...state,
items: newArrayChecked,
};
case ActionKind.UnChecked:
newArrayChecked = state.items.map((item) => {
return {
...item,
checked: iitem.id === payload.id ? false : item.checked
};
});
return {
...state,
items: newArrayUnchecked,
};

React.js - Having trouble creating a new invoice within my project

I'm newer to React and could really use a hand understanding how to create a new invoice within my project.
The Issue:
Currently, I can create a new Invoice no problem as shown in the images below. I changed the inputs to some test data to help illustrate the issue I'm having.
Here's the overhead view showing the total number of invoices within the stack so far.
The problem occurs when I go to create a second new invoice. It keeps all of the old data from my first one that I modified, even though I can click them and modify them independently from one another. The weird part is... only some of the values are staying the same while others can become independent from one another...
This is directly after creating a second invoice:
I changed the second invoice to all new data:
And this is the result within invoice 1:
And now when I create a 3rd new invoice:
This tells me that they're connected somehow.. A direct link to my project is here: https://github.com/Brent-W-Anderson/invoice-pdf/tree/invoices
Otherwise, I think the problem is how I'm creating a new invoice or how I'm modifying the data within it. Please look at line 113 where I modify the invoice or line 94 where I am creating a new one. I need all the help I can get, thank you!
https://github.com/Brent-W-Anderson/invoice-pdf/blob/invoices/src/components/app.js
import React from 'react';
import Moment from 'moment';
//components
import LoginSignUp from './login-signup/login-signup';
import Navigation from './navigation/navigation';
import Pages from './pages/pages';
//data
import UsersJSON from '../data/users.json'; // some test data for now. going to connect a database later.
import AppJSON from '../data/app.json';
//styling
import 'fontsource-roboto';
import '../styles/app.css';
export default class App extends React.Component {
state = {
loggedIn: false, // set to true to bypass logging in.
transitionOut: false,
activeUser: "", // can put whatever name you want here if loggedIn is set to true.
activePage: "invoices",
invoiceMode: "view", // dont change this unless you want to start with a specific manageable invoice.
userData: {}, // set to the specific array index from the users if looking for some sample data.
users: UsersJSON,
appData: AppJSON
};
setActiveModeView = (clicked) => { // view all of the invoices
this.setState({
invoiceMode: "view"
});
}
setActiveModeEdit = () => { // view a specific manageable/ editable invoice
this.setState({
invoiceMode: "edit"
});
}
login = (userData) => { // login and store the users data for component use.
let user = this;
let username = userData.personalInfo.name;
this.setState({
userData: userData,
transitionOut: false
});
setTimeout(function() { // let the app animate out before logging in.
user.setState({
loggedIn: true,
activeUser: username
});
}, 1000);
};
logout = () => { // logout and reset the users data.
let user = this;
this.setState({
transitionOut: true
});
setTimeout(function() { // let the app animate out before logging out.
user.setState({
loggedIn: false,
userData: {},
activePage: "invoices",
invoiceMode: "view",
activeUser: ""
});
}, 1500);
}
setActivePage = (page) => { // changing tabs
let pageName = page.target.innerHTML.toLowerCase().replace(/\s/g, '');
let app = this;
if(pageName !== "invoices") { // change view mode back to defaults if not within invoices.
setTimeout(function() {
app.setActiveModeView();
}, 500);
}else {
app.setActiveModeView("invoices");
};
this.setState({
activePage: pageName
});
};
createInvoice = idx => {
console.log(UsersJSON[0].invoices[0]);
this.setState(prevState => ({
userData: {
...prevState.userData,
invoices: [
...prevState.userData.invoices,
{
...UsersJSON[0].invoices[0],
invoiceID: idx + 1,
date: Moment(new Date()).format("YYYY-MM-DD")
}
]
}
}));
};
modifyInvoice = (userData, invoiceIdx, clientIdx, otherInputSelected, otherData) => (inputSelected) => { // editing specific invoice data and storing it back in state
const app = this;
let targetID, newVal;
if(inputSelected !== undefined) {
targetID = inputSelected.target.id;
newVal = inputSelected.target.value;
}else {
switch(otherInputSelected) {
case "billToEmail":
targetID = otherInputSelected;
newVal = otherData;
break;
case "fromEmail":
targetID = otherInputSelected;
newVal = otherData;
break;
default:
console.warn("no other input selected to save to app state.");
};
}
let newUserData = userData;
function overwriteState() {
app.setState({
userData: newUserData
});
}
switch(targetID) { // which input would you like to modify?
case "invoiceName":
newUserData.invoices[invoiceIdx].invoiceName = newVal;
overwriteState();
break;
// BILL TO
case "billToName":
newUserData.invoices[invoiceIdx].toName = newVal;
overwriteState();
break;
case "billToEmail":
newUserData.invoices[invoiceIdx].toEmail = newVal;
overwriteState();
break;
case "billToStreet":
newUserData.invoices[invoiceIdx].toAddress.street = newVal;
overwriteState();
break;
case "billToCityState":
newUserData.invoices[invoiceIdx].toAddress.cityState = newVal;
overwriteState();
break;
case "billToZip":
newUserData.invoices[invoiceIdx].toAddress.zip = newVal;
overwriteState();
break;
case "billToPhone":
newUserData.invoices[invoiceIdx].toPhone = newVal;
overwriteState();
break;
// FROM
case "fromName":
newUserData.invoices[invoiceIdx].fromName = newVal;
overwriteState();
break;
case "fromEmail":
newUserData.invoices[invoiceIdx].fromEmail = newVal;
overwriteState();
break;
case "fromStreet":
newUserData.invoices[invoiceIdx].fromAddress.street = newVal;
overwriteState();
break;
case "fromCityState":
newUserData.invoices[invoiceIdx].fromAddress.cityState = newVal;
overwriteState();
break;
case "fromZip":
newUserData.invoices[invoiceIdx].fromAddress.zip = newVal;
overwriteState();
break;
case "fromPhone":
newUserData.invoices[invoiceIdx].fromPhone = newVal;
overwriteState();
break;
// DETAILS
case "date":
newUserData.invoices[invoiceIdx].date = newVal;
overwriteState();
break;
case "description":
newUserData.invoices[invoiceIdx].items.description = newVal;
overwriteState();
break;
case "rate":
newUserData.invoices[invoiceIdx].items.rate = newVal;
overwriteState();
break;
case "qty":
newUserData.invoices[invoiceIdx].items.qty = newVal;
overwriteState();
break;
case "additionalDetails":
newUserData.invoices[invoiceIdx].items.additionalDetails = newVal;
overwriteState();
break;
default:
console.warn("something went wrong... selected target input:");
console.warn(targetID);
}
};
deleteInvoice = (invoice, idx) => { // deletes an invoice
let newUserData = this.state.userData;
newUserData.invoices.splice(idx, 1);
for(var x = 0; x < newUserData.invoices.length; x++) {
newUserData.invoices[x].invoiceID = (x + 1).toString();
}
this.setState({
userData: newUserData
});
}
render() {
let app = this.state;
if(app.loggedIn) { // if logged in
return (
<div className="app">
<Navigation
activeUser={app.activeUser}
setActivePage={this.setActivePage}
activePage={app.activePage}
appData={app.appData}
logout={this.logout}
/>
<Pages
setActiveModeView={this.setActiveModeView}
setActiveModeEdit={this.setActiveModeEdit}
invoiceMode={app.invoiceMode}
activePage={app.activePage}
appData={app.appData}
transitionOut={app.transitionOut}
userData={app.userData}
createInvoice={this.createInvoice}
modifyInvoice={this.modifyInvoice}
deleteInvoice={this.deleteInvoice}
/>
</div>
);
}else { // if not logged in
return (
<div className="app">
<LoginSignUp
login={this.login}
users={app.users}
/>
</div>
);
}
}
}

I believe one option would be to change:
case "billToStreet":
newUserData.invoices[invoiceIdx].toAddress.street = newVal;
overwriteState();
break;
to:
case "billToStreet":
newUserData.invoices[invoiceIdx].toAddress = { ...newUserData.invoices[invoiceIdx].toAddress, street: newVal };
overwriteState();
break;
and do the same for the other address fields.
I'm not sure why but I suspect that all of your toAddress entries are referencing the same object.

Trying to do a filter method on an object

I'm trying to do a delete todo and I want to remove the item from the object "byIds" with the specific id.
It will be like a filter for arrays but for the object.
I don't know what's so complicated hope for help I believe its stupid
import { ADD_TODO, TOGGLE_TODO, DELETE_TODO } from "../actionTypes";
const initialState = {
allIds: [],
byIds: {},
};
export default function (state = initialState, action) {
switch (action.type) {
case ADD_TODO: {
const { id, content } = action.payload;
return {
...state,
allIds: [...state.allIds, id],
byIds: {
...state.byIds,
[id]: {
content,
completed: false,
},
},
};
}
case TOGGLE_TODO: {
const { id } = action.payload;
return {
...state,
byIds: {
...state.byIds,
[id]: {
...state.byIds[id],
completed: !state.byIds[id].completed,
},
},
};
}
// of course its toggling but it doesn't even get there
case DELETE_TODO: {
const { id } = action.payload;
return {
...state,
allIds: state.allIds.filter((todo) => todo !== id),
byIds: state.byIds.filter((todo) => todo !== id),
};
}
default:
return state;
}
}
{
todos: {
allIds: [
1,
2,
3,
4
],
byIds: {
'1': {
content: 'Test1',
completed: false
},
'2': {
content: 'Test2',
completed: false
},
'3': {
content: 'test3',
completed: false
},
'4': {
content: 'test4',
completed: false
}
}
},
visibilityFilter: 'all'
}
That for the one who asked me to console log the byIds hope that will help me

What you need is to iterate through the keys of byids object and take only the ones you need.
case DELETE_TODO: {
const { id } = action.payload;
let newObj = {}
Object.keys(state.byIds).forEach(function(key) {
if (key !== id) {
newObj[key] = state.byIds[key]
}
});
return {
...state,
allIds: state.allIds.filter((todo) => todo !== id),
byIds: newObj
};
}
In case your id is not a string but a number, you need to check with key != id and not key !== id

You could use the rest syntax to exclude the id when creating the new object.
case DELETE_TODO: {
const { id } = action.payload;
const { [id]: _, ...restByIds } = state.byIds;
return {
...state,
allIds: state.allIds.filter((todo) => todo !== id),
byIds: restByIds,
};
}

You can separate the id out like this:
case DELETE_TODO: {
const id = action.payload.id;
const { [id]: _, ...filteredState } = state.byIds;
// ^ this takes id from state and puts it in variable _,
// everything else is packed into filteredState
return {
...state,
allIds: state.allIds.filter((todo) => todo !== id),
byIds: filteredState,
};
}
Edit:
Extra notes for anyone wondering about the syntax above, see these links:
Computed Property Names, how we are grabbing [id]
Destructuring assignment, how we are packing back into ...filteredState
Awesome comment explaining destructuring

How to fix the problem with second layer condition in redux reducer?

I'm making an application that gives tasks to learning methods. One of the reducers should change the state of the task mark: pass true or false depending on the solution of the task. But this code doesn't change the state of reducer.
My code:
const initialStateMethods = {
array: methodsObject
};
const methods = (state = initialStateMethods, action) => {
switch (action.type) {
case "CHANGE_MARK":
return {
...state,
array: state.array.map(method => {
if (method.id === action.methodIndex) {
method.tasks.map(task => {
if (task.id === action.taskIndex) {
return { ...task, mark: action.mark };
} else {
return task;
}
});
}
return method;
})
};
default:
return state;
}
};
But the value of the method changes easily and it works.
Example:
const methods = (state = initialStateMethods, action) => {
switch (action.type) {
case "CHANGE_MARK":
return {
...state,
array: state.array.map(method => {
if (method.id === action.methodIndex) {
return { ...method, name: "newName" };
}
return method;
})
};
default:
return state;
}
};
So I assume that the problem is in the multilayer structure
A small piece of the original object:
export const methodsObject = [
{
name: "from()",
id: 0,
tasks: [
{
taskName: "Task №1",
id: 0,
mark: null
},
{
taskName: "Task №2",
id: 1,
mark: null
}
]
}

You are missing a return statement next to the call of your map loop:
...
case "CHANGE_MARK":
return {
...state,
array: state.array.map(method => {
if (method.id === action.methodIndex) {
return method.tasks.map(task => {
if (task.id === action.taskIndex) {
return { ...task, mark: action.mark };
} else {
return task;
}
});
}
return method;
})
};

prevent duplicate objects being added to state react redux

I have a question regarding preventing duplicates from being added to my redux store.
It should be straight forward but for some reason nothing I try is working.
export const eventReducer = (state = [], action) => {
switch(action.type) {
case "ADD_EVENT":
return [...state, action.event].filter(ev => {
if(ev.event_id !== action.event.event_id){
return ev;
}
});
default:
return state;
}
};
The action looks something like the below:
{
type: "ADD_EVENT",
event: { event_id: 1, name: "Chelsea v Arsenal" }
}
The issue is that on occasions the API I am working with is sending over identical messages through a websocket, which means that two identical events are getting added to my store.
I have taken many approaches but cannot figure out how to get this to work. I have tried many SO answers,

Why your code is failing?
Code:
return [...state, action.event].filter(ev => {
if(ev.event_id !== action.event.event_id){
return ev;
}
});
Because first you are adding the new element then filtering the same element, by this way it will never add the new value in the reducer state.
Solution:
Use #array.findIndex to check whether item already exist in array or not if not then only add the element otherwise return the same state.
Write it like this:
case "ADD_EVENT":
let index = state.findIndex(el => el.event_id == action.event.event_id);
if(index == -1)
return [...state, action.event];
return state;

You can use Array.prototype.find().
Example (Not tested)
const eventExists = (events, event) => {
return evets.find((e) => e.event_id === event.event_id);
}
export const eventReducer = (state = [], action) = > {
switch (action.type) {
case "ADD_EVENT":
if (eventExists(state, action.event)) {
return state;
} else {
return [...state, action.event];
}
default:
return state;
}
};
Update (#CodingIntrigue's comment)
You can also use Array.prototype.some() for a better approach
const eventExists = (events, event) => {
return evets.some((e) => e.event_id === event.event_id);
}
export const eventReducer = (state = [], action) = > {
switch (action.type) {
case "ADD_EVENT":
if (eventExists(state, action.event)) {
return state;
} else {
return [...state, action.event];
}
default:
return state;
}
};

Solution:
const eventReducer = ( state = [], action ) => {
switch (action.type) {
case 'ADD_EVENT':
return state.some(( { event_id } ) => event_id === action.event.event_id)
? state
: [...state, action.event];
default:
return state;
}
};
Test:
const state1 = eventReducer([], {
type: 'ADD_EVENT',
event: { event_id: 1, name: 'Chelsea v Arsenal' }
});
const state2 = eventReducer(state1, {
type: 'ADD_EVENT',
event: { event_id: 2, name: 'Chelsea v Manchester' }
});
const state3 = eventReducer(state2, {
type: 'ADD_EVENT',
event: { event_id: 1, name: 'Chelsea v Arsenal' }
});
console.log(state1, state2, state3);

You can something like this, for the logic part to ensure you don't get the same entry twice.
const x = filter.arrayOfData(item => item.event_id !== EVENT_FROM_SOCKET);
if (x.length === 0) {
// dispatch action here
} else {
// ignore and do nothing
}

You need to be careful when using Arrays in reducers. You are essentially adding more items to the list when you call:
[...state, action.event]
If you instead use a map then you can prevent duplicates
const events = { ...state.events }
events[action.event.event_id] = action.event.name]
{...state, events }

If duplicate exist in previous state then we should return same state else update the state
case "ADDPREVIEW":
let index = state.preview.findIndex(dup => dup.id == action.payload.id);
return {
...state,
preview: index == -1 ? [...state.preview,action.payload]:[...state.preview]
};