arr[]レデューサーのredux状態の配列に要素を追加するにはどうすればよいですか？私はこれをやっています-
import {ADD_ITEM} from '../Actions/UserActions'
const initialUserState = {
arr:[]
}
export default function userState(state = initialUserState, action)
{
console.log(arr);
switch (action.type)
{
case ADD_ITEM:
return {
...state,
arr: state.arr.push([action.newItem])
}
default:
return state
}
}
回答:
変更なしで配列に項目を追加する2つの異なるオプション
case ADD_ITEM :
return {
...state,
arr: [...state.arr, action.newItem]
}または
case ADD_ITEM :
return {
...state,
arr: state.arr.concat(action.newItem)
}arr: [...state.arr, why here?]
[action.newItem, ...state.arr]、最初の位置に要素を挿入します。
pushは配列を返しませんが、配列の長さ（docs）を返します。そのため、あなたがしていることは、配列をその長さに置き換えて、持っていた唯一の参照を失うことです。これを試して：
import {ADD_ITEM} from '../Actions/UserActions'
const initialUserState = {
arr:[]
}
export default function userState(state = initialUserState, action){
console.log(arr);
switch (action.type){
case ADD_ITEM :
return {
...state,
arr:[...state.arr, action.newItem]
}
default:return state
}
}
Object.assignか？
Object.assignですか？オブジェクトに使用されますが、基本的には同じです。あなたが持っている場所は、それがオブジェクトである限り、をarr:[...state.arr, action.newItem]使用できます。それを州全体にしたい場合は、次のようにしてくださいobj: Object.assign({}, state.obj, action.newItemobjnewItemObject.assign({}, state, {arr: [..state.arr, action.newItem]})
var obj = { isLoading: true, data: ['a', 'b', 'c', 'd'] } var newObj = Object.assign({}, obj, { data: [...obj.data, 'e'] });そしてそれは私にこれを与えます：{ isLoading: true, data: [ 'a', 'b', 'c', 'd', 'e' ] }私が必要とするものに十分なnewObjのため。しかし、spreadオペレーターなしでObject.assignを使用して同じ結果を生成したかったのです。それは可能ですか？
[].concat(obj.data, ['e'])ES6の機能を使いたくない場合は、に置き換えることができると思います。Object.assignはオブジェクト用であり、配列で使用してもエラーは発生しませんが、結果は配列の連結ではありません。しようObject.assign({}, [1, 2, 3], [4])とする[4, 2, 3]と、結果として得られます。
配列の特定の位置に挿入する必要がある場合、これを行うことができます：
case ADD_ITEM :
return {
...state,
arr: [
...state.arr.slice(0, action.pos),
action.newItem,
...state.arr.slice(action.pos),
],
}
サンプルがあります
import * as types from '../../helpers/ActionTypes';
var initialState = {
changedValues: {}
};
const quickEdit = (state = initialState, action) => {
switch (action.type) {
case types.PRODUCT_QUICKEDIT:
{
const item = action.item;
const changedValues = {
...state.changedValues,
[item.id]: item,
};
return {
...state,
loading: true,
changedValues: changedValues,
};
}
default:
{
return state;
}
}
};
export default quickEdit;