Redux：如何将项目添加到数组，以及添加了所有项目的 return 数组

Question

我在我的 React 应用程序中使用 Redux，目前只有 1 个 reducer 用于加密货币组合。只是一组硬币。

当我第一次调度我的 ADD_COIN 操作时，我得到了预期的 1 个对象数组。然而，当我再次调用另一个硬币上的 dispatch 时，它再次 return 数组，但仍然只有 1 个项目，即选择的最新硬币。

这需要如何重写以 return 返回包含所有添加硬币的更新数组？

添加了第一个硬币

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

index.js店铺代码

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

减速器文件

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

最后 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

我想通了，我错误地尝试使用 2 种不同的设计模式。 Redux 的工厂模式...实际上还不错，但它让我犯了这个错误。

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 应该是我的投资组合数组。所以在操作 ADD_COIN 的情况下，我需要将它推入那个数组，而不是我工厂的数组（尽管我想我可以使用工厂数组并将其设置为 initialState）

然后在我的操作中我只发送了硬币，而不是已经在另一个数组中的硬币。

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

现在投资组合数组的状态正确更新

如果有人对此有更好的描述性答案，我会标记他们的答案而不是这个。

Answer 2

不是用 .push 改变你的 initialState，"copy" 你的最后一个状态变成有意义的新状态

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

Redux：如何将项目添加到数组，以及添加了所有项目的 return 数组

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

javascript

bitcoin

reactjs

redux

react-redux

index.js店铺代码

减速器文件

动作文件

投资组合缩减器

最后 coinFactory.js 有数组