Redux: How to add item to Array, and return Array with all items added

Question

I'm using Redux in my React App, currently only have 1 reducer at the moment for a Portfolio of cryptocurrencies. Just an array of coins.

When I dispatch my ADD_COIN action the first time I get back an Array of 1 object which is expected. However when I call dispatch again on another coin it returns the Array again, but still only with 1 item, the latest coin that was selected.

How would this need to be re-written to return back the updated Array with all added coins?

1st coin added

2nd coin added, expected to see an Array with 2 objects:

index.js the store code

const store = createStore(reducer, compose(
    applyMiddleware(thunk),
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
));

The reducer file

import { combineReducers } from 'redux'
import portfolio from './portfolio'

export default combineReducers({
    portfolio
});

The actions file

import * as R from 'ramda'
import * as api from '../../services/api'
import { addToPortfolio, getPortfolio } from '../../services/coinFactory'

export const ADD_COIN = 'ADD_COIN'

export function addCoin(coin) {
    return dispatch =>
        api.getCoin(coin)
            .then((res) => addToPortfolio(R.head(res.data)))
            .then((portfolio) => dispatch(add(portfolio)));
}

//action creator
export function add(portfolio) {
    return {
        type: ADD_COIN,
        portfolio
    }
}

The Portfolio reducer

import { ADD_COIN } from './actions'

const initialState = [];

export default (state = initialState, action) => {
    switch(action.type) {
        case ADD_COIN:
            return action.portfolio;
        default:
            return state;
    }
}

Finally the coinFactory.js which has the Array

import * as R from 'ramda'
import local_coins from '../coins.json'

export const storage = {
    coins: local_coins,
    portfolio: []
};

export const getPortfolio = () => storage.portfolio;

export const addToPortfolio = (coin) => {
    storage.portfolio.push(coin);
    return getPortfolio();
};

azium · Accepted Answer · 2017-06-29 21:48:35Z

15

Instead of mutating your initialState with .push, "copy" your last state into meaningful new state

import { ADD_COIN } from './actions'

const initialState = [];

export default (state = initialState, action) => {
    switch(action.type) {
        case ADD_COIN:
            return [...state, action.portfolio]; // same as state.concat(action.portfolio)
        default:
            return state;
    }
}

answered Jun 29, 2017 at 21:48

azium

20.7k8 gold badges63 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Leon Gaban Over a year ago

Hmm strange, I'm running into the same original problem now... an Array with 1 item, debugging

azium Over a year ago

are you still using this function addToPortfolio ?

azium Over a year ago

Oh I think I see... storage.portfolio returns an array

azium Over a year ago

so you're trying to "add a coin" but you're sending the entire portfoilio, so your new state is an array with a portfolio array inside of it

azium Over a year ago

cool if it's open I'll take a look. join our slack for further help. ping @alex-wilmer slack.torontojs.com

|

Leon Gaban · Accepted Answer · 2017-06-29 21:45:48Z

3

I figured it out, I was incorrectly trying to use 2 different design patterns. The factory pattern with Redux... not actually bad, but it made me make this mistake.

import { ADD_COIN } from './actions'

const initialState = [];

export default (state = initialState, action) => {
    switch(action.type) {
        case ADD_COIN:
            return initialState.push(action.portfolio);
        default:
            return state;
    }
}

initialState is suppose to be my Portfolio array. So in the case of action ADD_COIN, I need to push it into that array, not the one from my factory (though I guess I could use the factory Array and set it to initialState)

Then in my actions I sent out just the coin, not a coin already inside of another Array.

import * as R from 'ramda'
import * as api from '../../services/api'

export const ADD_COIN = 'ADD_COIN'

export function addCoin(coin) {
    return dispatch =>
        api.getCoin(coin)
            .then((res) => R.head(res.data))
            .then((remote_coin) => dispatch(add(remote_coin)));
}

// action creator
export function add(portfolio) {
    return {
        type: ADD_COIN,
        portfolio
    }
}

Now the state of the Portfolio Array updates correctly

If someone has a better more description answer to this I'll mark their answer instead of this.

edited Jun 29, 2017 at 21:45

answered Jun 29, 2017 at 21:43

Leon Gaban

39.4k123 gold badges351 silver badges553 bronze badges

4 Comments

Leon Gaban Over a year ago

@azium yes I am, do you recommend a better alternative?

azium Over a year ago

yes .concat or [...state, coin]. redux specifically says to not mutate state anywhere

azium Over a year ago

also you're adding an item to intitialState, not state, so you can only ever have one item in your array at most, which must be a mistake

Leon Gaban Over a year ago

Ah that is better, do you want to post your answer with that spread operator? I don't like checking my own answers, but others.

Collectives™ on Stack Overflow

Redux: How to add item to Array, and return Array with all items added

index.js the store code

The reducer file

The actions file

The Portfolio reducer

Finally the coinFactory.js which has the Array

2 Answers 2

10 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

index.js the store code

The reducer file

The actions file

The Portfolio reducer

Finally the coinFactory.js which has the Array

2 Answers 2

10 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related