清除 Redux 中的数组 state

Question

如何清除 Redux 中的数组 state？ 我有一个空数组的初始 state，并且正在添加内容。 我想要一个只是清除它的操作，我尝试了以下方法，但它给了我关于我给 CLEAR_THINGS 操作的“action.payload”的“意外令牌”错误：

export default (state=[], action) => {
switch (action.type) {
    case "RECEIVE_THING":
        return [
            ...state,
            action.payload
        ];
    case "CLEAR_THINGS":
        return {
            ...state,
            action.payload // payload here is []...
        };
    default:
        return state;
}}

如果我只使用 [] 而不是通过 action.payload，它也会抛出错误。

Answer 1

export default (state=[], action) => {
switch (action.type) {
    case "RECEIVE_THING":
        return [
            ...state,
            action.payload
        ];
    case "CLEAR_THINGS":
        return [];
    default:
        return state;
}}

RECEIVE_THING操作使用对象扩展符号返回一个状态，该状态是一个数组 ( [] )，其中包含先前状态 ( [...state] ) 并添加一个新项目 ( [...state, action.payload] ）。 用于这个新项目的键/属性名称只是数组的下一个索引。 毕竟，它是一个数组。

在CLEAR_THINGS的代码中，您正在创建一个包含旧状态的对象（ {} ）（假设它是['item1'] ），因此它看起来像{ '0': 'item1' } 。 接下来，您将继续使用对象速记符号来添加更多状态，但这需要您使用单个标识符（单个单词），但您正在使用虚线概念（限定标识符）来访问属性。 您有点指示创建名为action.payload的属性，但这是非法的，这就是您的错误的来源。 它在数组的情况下工作的原因是因为在这种情况下只需要一个值，因为键是从数组的索引派生的。

您想要做的是始终返回相同类型的对象，在您的情况下，是一个数组。 从return {开始，你已经走错路了。

Answer 2

ES6 操作的简写

{thing}

转译为

{"thing": thing}

这会导致您的情况出现语法错误，因为密钥包含一个句点，并且不清楚密钥应该是什么。 也许你打算做这样的事情？

return {
    action: {
        payload: action.payload
    }
}

但这并不能解决手头的问题：如果要使用此操作清除数组，则不应将现有状态扩展到下一个状态。 相反，您应该只返回与现有状态相同形状的东西，但在语义上具有空的含义（在这种情况下，只是一个空数组）。 我想你想要的是

case "RECEIVE_THING":
    return [
        ...state,
        action.payload
    ];
case "CLEAR_THINGS":
    return [];

Answer 3

您应该在“CLEAR_THINGS”处理程序中返回并清空数组：

export default (state=[], action) => {
switch (action.type) {
    case "RECEIVE_THING":
        return [
            ...state,
            action.payload
        ];
    case "CLEAR_THINGS":
        return [];
    default:
        return state;
}}

由于您只想清除不需要引用现有状态的所有内容，因此您只想将新状态设置为空数组。

另一件值得一提的事情是，我可能会将数组嵌套在一个对象中。 如果您的减速器将来变得更加复杂，那么您将很难以这种方式添加功能，并且这种方法将使您的应用程序在需要时获得进一步的复杂性。 当然，您可以随时添加减速器，但我喜欢通过这种方式使减速器更加灵活。 这看起来像：

export default (state = { myArray: [] }, action) => {
switch (action.type) {
    case "RECEIVE_THING":
        return {
            ...state,
            myArray: state.myArray.concat([action.payload]),
        };
    case "CLEAR_THINGS":
        return {
            ...state,
            myArray: [],
        };
    default:
        return state;
}}

Answer 4

彼时我找到了答案， 在这里上的另一个线程计算器。

问题是因为函数“map”只能用于数组，不能用于对象。 所以在我的图像组件中我不得不改变

this.props.filtered.map((pic)

到

this.props.filtered.filtered.map((pic)

Answer 5

当我的输入为空值时，我想清除我的 state。 我怎样才能运行调度，它会删除我的“数据”state，其中包含来自 api 的所有数据？

这是我的减速机：

export const SearchOpportunities = (state = initialState, action) => {
  console.log('action: ', action)

  switch (action.type) {
    case GET_SEARCH_OPPORTUNITIES_SUCCESS:
      return {
        ...state,
        data: [...state.data, action.payload],
        pagina: state.pagina + 1
      }
    case GET_ID_LICITACAO_SUCCESS:
      return {
        ...state,
        itens: [...state.itens, action.payload.data.itens]
      }
    case GET_SEARCH_OPPORTUNITIES_FAILED:
    case GET_ID_LICITACAO_FAILED:
      return {
        ...state,
        error: action.payload.data,
      }
    case CLEAR_LICITACOES:
    case CLEAR_ITENS:
      return {
        data: [],
        itens: []
      }
    default: 
      return state
  }
}

我在 index.js 中进行调度以从 api 获取数据：

const detectKeyPress = (e) => {
        const { key } = e;

        if (key === 'Enter') {
            try {
                dispatch({
                    type: GET_SEARCH_OPPORTUNITIES,
                    keyword: searchedWord,
                    pagina: data.pagina,
                })
            } catch (error) {
                dispatch(getSearchOpportunitiesFailed(error))
            }
        }
    }