React Redux：如何在 reducer 中正确返回可迭代数组？

Question

我正在使用 React Redux，我试图从我的 reducer 中的一个简单数组中返回一个值。这是我的短文件：

App.js

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

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

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

List.js

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

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

Actions.js

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

Reducer.js

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

export default AddToStore;

这给了我“对象不可迭代”的错误。为什么？如果我只传递一个字符串而不是数组，例如“Matthew”，我可以通过返回 [...action, ...state] 将其打印出来。

Answer 1

它不起作用，因为在您的商店中，您试图返回一个数组而不是一个对象。在此处了解有关 redux 主体的更多信息：https://redux.js.org/introduction/three-principles#single-source-of-truth

App.js

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

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

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

Reducer.js

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

export default AddToStore;

并将 action.js 更改为传入 objNames 而不是 arr。

Answer 2

我通过用 [] 更改花括号解决了这个问题。

const initialState = {
  clients: [],
  loading: false,
};
export default function clientReducer(state = initialState, action) {
switch (action.type) {

    case ADD_CLIENT:
          return [action.clients, state];
 default:
      return state;
}
}