I have a billingCycle object with have a list of credits and debts objects that the state would looks like this:
billingCycle: {
id: 1,
name: 'March',
month: 3,
year: 2022,
credits: [
{
id: 1,
name: 'Salary',
value: 3700
}
],
debts: [
{
id: 1,
name: 'Car fix',
value: 450
}
]
}
But I read in Redux docs that this is a bad practice and it’s recommended to use normalized states. So my reducers looks like this:
const INITIAL_STATE = { list: [], billingCycle: {}, credits: [], debts: [] };
export default function (state = INITIAL_STATE, action) {
switch (action.type) {
case "BILLING_CYCLES_FETCHED":
return { ...state, list: action.payload };
case "BILLING_CYCLES_CREATED":
return { ...state, billingCycle: action.payload };
case "BILLING_CYCLES_READED":
return { ...state, billingCycle: action.payload };
case "BILLING_CYCLES_UPDATED":
return { ...state };
case "BILLING_CYCLES_REMOVED":
return { ...state };
case "CREDIT_ADDED":
return { ...state, credits: state.credits.concat(action.payload) };
case "CREDIT_REMOVED":
return { ...state, credits: state.credits.splice(action.payload, 1) };
case "DEBT_ADDED":
return { ...state, debts: state.debts.concat(action.payload) };
case "DEBT_REMOVED":
return { ...state, debts: state.debts.splice(action.payload, 1) };
case "RETURN_STATE":
return { ...state };
default:
return state;
}
}
And this is my create action:
export function create(billingCycle) {
axios.post(`${BASE_URL}/billingCycles`, billingCycle);
return {
type: "BILLING_CYCLES_CREATED",
payload: billingCycle
};
}
My question is: how can I send a billingCycle object to the API call with credits and debts with it? The create method only add the billingCycle without it. How can I map the respective objects related with it to the object? Where in my code I do this integration?