I'm trying to implement a simple shopping cart functionality using Redux and pure Javascript. I've split my reducers in two, one for UI and one for the cart-functionality.
My problem is, when adding an item to the cart, it shows up fine in state, but when I add another item, it overwrites the previous item in state. I've struggled with this for a while, and tried multiple solutions.
const initialState = {
visibilityFilter: VisibilityFilters.SHOW_ALL,
shop: {
purchasedItems: [],
shopItems: [...shop.items]
}
}
function shopReducer(state = initialState, action) {
switch (action.type) {
case BUY_ITEM:
const clickedItem = state.shopItems.filter( item => item.id == action.id);
return {...state, purchasedItems: [...state.purchasedItems, clickedItem ] }
function buyItemShop(id) {
return {
type: BUY_ITEM,
id
}
}
Object destructuring does not perform a deep merge.
Anyways, you have some other issues because you are not using the proper keys from the state.
Should be instead:
return {
...state,
shop: {
purchasedItems: [...state.shop.purchasedItems, clickedItem],
shopItems: state.shop.shopItems,
},
}
This works - simply needed to spread the clickedItem object in the return statement.
function shopReducer(state = initialState.shop, action) {
switch (action.type) {
case BUY_ITEM:
let clickedItem = state.shopItems.filter( item => item.id == action.id);
return {...state, cartItems: [...state.cartItems, ...clickedItem ] }
Related
Hello created reducer and wondering is this right pattern.
I am trying to:
Add new item into array of objects ACTION_TYPE
Update item in array of objects ACTION_TYPE_EDIT, this one actually should set charity prop and update item in array charities
Wondering if i am on right path, i don't want to mutate, so here is my code.
export const reducerCharities = (
state: CharityReducerState,
action: CharitiesAction
| CharityEditAction
) => {
switch (action.type) {
case ACTION_TYPE_EDIT:
return {
...state,
charity: {
...state.charity,
...(action.charity || {}),
},
charities: [
...state.charities.map(item => item.id === action.charity?.id ? { ...item, ...action.charity } : item)
]
}
case ACTION_TYPE:
return {
...state,
charities: [
...state.charities || [],
...action.charities
]
}
default:
return state
}
}
So my question is will this part mutate state or is there better way to write this?
charities: [
...state.charities.map(item => item.id === action.charity?.id ? { ...item, ...action.charity } : item)
]
Is this right approach how to add new item into array
{
...state,
charities: [
...state.charities || [],
...action.charities
]
}
The easiest (and since 2019 officially recommended) way of doing this would be using the official Redux Toolkit package and the createSlice method.
Within that, you can just mutate and don't have to care about manual immutable updates - the package takes over for you.
The code could look like
const charitiesSlice = ({
name: 'charities',
initialStae: myInitialState,
reducers: {
edit(state, action: PayloadAction<Charity>){
const charity = state.charities.find(item => item.id === action.payload.id)
if (charity) {
Object.assign(charity, action.payload)
}
state.charity = action.payload
}
}
}
export const { edit } = charitiesSlice.actions
export const reducerCharities = charitiesSlice.reducer
I made reducer ad my goal i filtered that. Look at my code:
case 'ACTIVE_USER':
return {
...state,
users: state.users.filter(user => user.active === 1)
}
case 'UNACTIVE_USER':
return {
...state,
users: state.users.filter(user => user.active === 0)
}
It works if I run some case. But if I show active users and then I'll try show unactive users it display nothing. I think that I work on this same array not on copy and here is problem. How can I filtered all the time this same array and siplay active on unactive user when I want?
Maintain only 'active' state in store.
case 'ACTIVE_USER':
return {
...state,
active: 1
}
case 'UNACTIVE_USER':
return {
...state,
active: 0
}
In the components
const active = <from store>;
const users = <from store>;
const data = users.filter(user => user.active === active)
Keep users unchanged and add filteredUsers in store.
case 'ACTIVE_USER':
return {
...state,
filteredUsers: state.users.filter(user => user.active === 1)
}
case 'UNACTIVE_USER':
return {
...state,
filteredUsers: state.users.filter(user => user.active === 0)
}
Then use filteredUsers in component level.
it happened because you override state.users each time you use state.users.filter
so you need to make new array of filteredUsers and make all your computations so as not to affect original users array
I want to make a DeleteTransaction case and remove an item from the state using filter.
My current code is below:
const TransactionReducer = ((state, action) => {
switch(action.type){
case "AddTransactions": {
return [action.payload, ...state]
}
default:
return state;
}
})
export default TransactionReducer;
You can create a new case and filter() your state. filter() returns a new array, so the following should work:
const TransactionReducer = ((state, action) => {
switch(action.type) {
case "AddTransactions":
return [action.payload, ...state]
case "DeleteTransaction":
return state.filter(item => item.id !== action.payload)
default:
return state;
}
})
export default TransactionReducer;
You can pass an id as the payload and check if it's the same as the id in your state array. (Although I don't know how your state looks like, so it's just a guess.)
I've set up a Store.js with a players array. I want to add players to the array as I select them but still be able to set the array to empty if I clear the array.
Here is some code from my Store.js
const initialState = {
playerCollection: [],
}
const reducer = (state, action) => {
switch (action.type) {
case 'UPDATE_PLAYER_COLLECTION':
return { ...state, playerCollection: action.value };
default:
return state;
}
}
Here is some code from my Players.js
for(let i=0; i<players.length; i++){
let player = players[i];
if(player.position === state.posAbbr && player.status === 'ACT'){
let newPlayer = createNewPlayer(roster, player);
dispatch({ type: 'UPDATE_PLAYER_COLLECTION', value: [...state.playerCollection, newPlayer] });
return;
}
}
My dispatch line is only adding a single player to the playerCollection array.
I also want to, like I said above, be able to set the array to [] if I clear it.
Define a clear playerCollection action, and set array to empty in reducer for that action:
const reducer = (state, action) => {
switch (action.type) {
case 'UPDATE_PLAYER_COLLECTION':
return { ...state, playerCollection: action.value };
case 'CLEAR_PLAYERS':
return {...state,playerCollection: []};
case "ADD_PLAYER" :
return {...state,playerCollection : [...state.playerCollection,action.value]}
default:
return state;
}
}
I'm wondering if you could help me with this problem if possible. I am trying to delete an item from the Redux state. I have passed in the ID of the item that the user clicks via action.data into the reducer.
I'm wondering how I can match the action.data with one of the ID's within the Redux state and then remove that object from the array? I am also wondering the best way to then set the new state after the individual object has been removed?
Please see the code below:
export const commentList = (state, action) => {
switch (action.type) {
case 'ADD_COMMENT':
let newComment = { comment: action.data, id: +new Date };
return state.concat([newComment]);
case 'DELETE_COMMENT':
let commentId = action.data;
default:
return state || [];
}
}
Just filter the comments:
case 'DELETE_COMMENT':
const commentId = action.data;
return state.filter(comment => comment.id !== commentId);
This way you won't mutate the original state array, but return a new array without the element, which had the id commentId.
To be more concise:
case 'DELETE_COMMENT':
return state.filter(({ id }) => id !== action.data);
You can use Object.assign(target, ...sources) and spread all the items that don't match the action id
case "REMOVE_ITEM": {
return Object.assign({}, state, {
items: [...state.items.filter(item => item.id !== action.id)],
});
}
You can use Try this approach.
case "REMOVE_ITEM":
return {
...state,
comment: [state.comments.filter(comment => comment.id !== action.id)]
}
For anyone with a state set as an Object instead of an Array:
I used reduce() instead of filter() to show another implementation. But ofc, it's up to you how you choose to implement it.
/*
//Implementation of the actions used:
export const addArticle = payload => {
return { type: ADD_ARTICLE, payload };
};
export const deleteArticle = id => {
return { type: DELETE_ARTICLE, id}
*/
export const commentList = (state, action) => {
switch (action.type) {
case ADD_ARTICLE:
return {
...state,
articles: [...state.articles, action.payload]
};
case DELETE_ARTICLE:
return {
...state,
articles: state.articles.reduce((accum, curr) => {
if (curr.id !== action.id) {
return {...accum, curr};
}
return accum;
}, {}),
}
In my case filter worked without () and {} and the state was updated
case 'DELETE_COMMENT':
return state.filter( id => id !== action.data);