Redux:如何将项添加到Array,并返回包含所有项的Array

Question

我在我的React应用程序中使用Redux,目前只有1个减速器用于加密货币组合.只是一堆硬币.

当我第一次收到一个预期的1个对象的数组时,我调度我的ADD_COIN动作.然而,当我再次在另一个硬币上调用dispatch时,它再次返回Array,但仍然只有1个项目,即所选的最新硬币.

如何重新编写这些以使用所有添加的硬币返回更新的数组？

第一枚硬币加入

添加了第二枚硬币,预计会看到一个包含2个对象的数组:

index.js商店代码

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

reducer文件

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

export default combineReducers({
    portfolio
});

动作文件

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

投资组合减速机

import { ADD_COIN } from './actions'

const initialState = [];

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

最后是拥有Array的coinFactory.js

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

Answer 1

不要改变你的initialState,而是将你.push的最后一个状态"复制"成有意义的新状态

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