score:15

Accepted answer

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;
    }
}

score: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

enter image description here

enter image description here

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


Related Query

More Query from same tag