React Redux: Как правильно вернуть итеративный массив в редуктор?

Question

Я работаю в React Redux и пытаюсь вернуть значение из простого массива в моем редукторе. Вот мои короткие файлы:

Приложение. js

let arr = [{"name": "Matthew"}];

function App() {
    const dispatch = useDispatch();
    dispatch(action1(arr));

    return(
        <div>
            <List />
        </div>
    );
}

Список. js

function List(){
    const val = useSelector(getVals);

    return(
        <div>
            {val}
        </div>
    )
}

Действия. js

export function action1(arr){
    return { type: ADD_STORE, arr};
}

Редуктор. js

function AddToStore(state = [], action){
    switch(action.type){
        case ADD_STORE:
            return [...action.name, ...state];
    }
}

export default AddToStore;

Это дает мне ошибку "объект не повторяется. " Почему? Вместо массива, если я просто передам строку, например, «Мэтью», я смогу распечатать ее, вернув [... action, ... state].

Answer 1

Это не работает, потому что в вашем магазине вы пытаетесь вернуть массив вместо объекта. Подробнее о принципах избыточности здесь: https://redux.js.org/introduction/three-principles#single -истина истины

Приложение. js

let objNames = {names: [{"name": "Matthew"}]};

function App() {
    const dispatch = useDispatch();
    dispatch(action1(arr));

    return(
        <div>
            <List />
        </div>
    );
}

Редуктор. js

function AddToStore(state, action){
    switch(action.type){
        case ADD_STORE:
            return {...action.names, ...state};
    }
}

export default AddToStore;

И изменил действие. js для передачи в objNames вместо обр.