[英]Redux: How to add item to Array, and return Array with all items added
I'm using Redux in my React App, currently only have 1 reducer at the moment for a Portfolio of cryptocurrencies. 我在我的React应用程序中使用Redux,目前只有1个减速器用于加密货币组合。 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. 当我第一次收到一个预期的1个对象的数组时,我调度我的ADD_COIN动作。 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. 然而,当我再次在另一个硬币上调用dispatch时,它再次返回Array,但仍然只有1个项目,即所选的最新硬币。
How would this need to be re-written to return back the updated Array with all added coins? 如何重新编写这些以使用所有添加的硬币返回更新的数组?
2nd coin added, expected to see an Array with 2 objects: 添加了第二枚硬币,预计会看到一个包含2个对象的数组:
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;
}
}
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();
};
Instead of mutating your initialState with .push
, "copy" your last state into meaningful new state 而不是使用.push
改变你的initialState,而是将你的最后一个状态“复制”成有意义的新状态
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;
}
}
I figured it out, I was incorrectly trying to use 2 different design patterns. 我想通了,我错误地尝试使用2种不同的设计模式。 The factory pattern with Redux... not actually bad, but it made me make this mistake. 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 is suppose to be my Portfolio array. initialState被认为是我的Portfolio数组。 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) 所以在动作ADD_COIN的情况下,我需要将它推入该数组,而不是我工厂的数组(虽然我想我可以使用工厂数组并将其设置为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 现在,Portfolio Array的状态正确更新
If someone has a better more description answer to this I'll mark their answer instead of this. 如果有人对此有更好的描述答案,我会标记他们的答案而不是这个。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.