Question

我正在使用 ethplorer 的 API 和前端的 React、redux-react 和 thunk 中间件构建一个 ETH 投资组合跟踪器。商店的主要组成部分是一组对象（令牌）。您可以在下面看到它的减速器和操作：

import {createToken, initializeTokens, deleteToken, replaceTokens} from '../services/tokens'

const tokenReducer = (state = [], action) => {
  switch (action.type) {
    case 'ADD_TOKEN':
      return state.concat(action.data)
    case 'ERASE_TOKEN':
      return state.filter(token => token.address !== action.data)
    case 'INIT_TOKENS':
      return action.data
    default:
      return state
  }
}

//Defining Actions
export const addToken = address => {
  return async dispatch => {
    const newToken = await createToken(address)
    dispatch({
      type: 'ADD_TOKEN',
      data: newToken
    })
  }
}

export const updateTokens = () => {
  return async dispatch => {
    const updatedTokens = await initializeTokens()
    await replaceTokens(updatedTokens)
    dispatch({
      type: 'INIT_TOKENS',
      data: updatedTokens
    })
  }
}

export const eraseToken = address => {
  return async dispatch => {
    await deleteToken(address)
    dispatch({
      type: 'ERASE_TOKEN',
      data: address
    })
  }
}

export default tokenReducer

导入的函数用于从 API 获取令牌，然后将它们保存到本地数据库中。操作的另一个组件是 MarketCap 过滤器（字符串），我用它来根据市值（从大到小、从小到大或无）对代币进行排序。它有一个超级简单的减速器和一个动作：

const mcReducer = (state='NONE', action) => {
  switch (action.type) {
    case 'SET_MC_FILTER':
      return action.filter
    default:
      return state
}
}

export const mcFilterChange = filter => {
  return {
    type: 'SET_MC_FILTER',
    filter
  }
}

export default mcReducer

当我开始排序要在 React 组件中显示的标记时，问题就开始了。虽然我不打算更改 tokens 状态，而只想更改显示的令牌数组，但我的 tokens 状态在我排序后仍然更改为排序后的状态MC。所以发生的事情是：程序调度 SET_MC_FILTER => TokenList 根据过滤器对令牌进行排序 => tokenReducer 返回变异状态而不是旧状态。我不明白为什么会发生这种情况，因为我不会在这里发送任何会影响 tokens 状态的操作，并且默认情况下 tokenReducer 应该只返回存储在其中的状态。这是问题显然发生的最后一段代码：

const initTokens = useSelector(state => state.tokens)
const mcFilter = useSelector(state => state.mcFilter)

  const getDisplayTokens = inTokens => {
    switch (mcFilter) {
    case 'NONE':
      return inTokens
    case 'DESCENDING':
      return inTokens.sort(compareMCDescending)
    case 'ASCENDING':
      return inTokens.sort(compareMCAscending)
    default:
      return inTokens
  }}
  return(
    <div className='token-list'>
      {getDisplayTokens(initTokens).map(t =>
        <TokenTile token={t} key={t.id}/>
        )}
    </div>
  )

我尝试使用 redux-devtools 的调试器和跟踪选项来追踪 tokens 更改的确切位置，但是在任何地方 tokenReducer 都会立即返回更改后的状态，我不知道为什么。任何帮助将不胜感激

Answer 1

Array.prototype.sort() 原地改变数组。永远不要尝试直接在从 Redux 状态读取的数组上调用 .sort()。您必须复制数组，然后对它们进行排序。

另外，请注意您应该使用 our official Redux Toolkit package，它既可以消除减速器中的突变，又可以在您尝试改变减速器外部的代码时抛出错误。

有关如何正确使用 RTK 的教程，请参阅 https://redux.js.org/tutorials/fundamentals/part-8-modern-redux。

默认情况下返回变异状态 redux

1 个答案: