Javascript redux状态在调用还原程序之前得到-不正确-更新（w/ReactDnD）

编辑：错误是一个单独的辅助函数，它正在改变状态（未显示在帖子中）

---

我正在尝试使用ReactDnD通过拖放创建一个可排序的图像网格。我一直在关注本教程，并尝试使用redux而不是React上下文来实现它

我遇到的问题是，我的道具在重新排列图像后没有得到更新。我一直在调试reducer，并注意到状态在reducer有机会更新之前以某种方式得到了更新（这将触发mapstatetrops以更新的状态重新加载我的组件）。问题是我不知道为什么会这样。我有一种感觉，因为ReactDnD也在使用Redux，所以某种程度上导致了这种情况

以下是不同的部分：

Index.js

export const store = createStore(reducers, applyMiddleware(thunk))

ReactDOM.render(
    <Provider store={store}>
        <DndProvider backend={HTML5Backend}>
            <App />
        </DndProvider>
    </Provider>,
    document.getElementById('root')
)

动作创建者

import { combineReducers } from 'redux'

const collectionReducer = (state = [], action) => {
    // state is already updated before the reducer has been run
    console.log('state:', state, 'action: ', action)

    switch (action.type) {
        case 'LOAD_ITEMS':
            return action.payload
        case 'MOVE_ITEM':
            return action.payload
        default:
            return state
    }
}

export default combineReducers({
    items: collectionReducer,
})

export const moveItem = (sourceId, destinationId) => (dispatch, getState) => {
    const itemArray = getState().items
    const sourceIndex = itemArray.findIndex((item) => item.id === sourceId)
    const destinationIndex = itemArray.findIndex(
        (item) => item.id === destinationId
    )

    const offset = destinationIndex - sourceIndex
    //rearrange the array
    const newItems = moveElement(itemArray, sourceIndex, offset)

    dispatch({ type: 'MOVE_ITEM', payload: newItems })
}

---

发现错误-不幸的是，它超出了发布的代码，因为我认为它是一个简单的帮助函数。我意识到我正在使用“拼接”方法来重新排列imageArray，从而改变状态。

@T.J.Crowder使用管理结果状态的父组件（“collectionReducer”controls“state.items”）进行更新。抱歉，我以为你指的是如何使用reducer中更新的状态（这是之前发布的App.js）。使用redux的“CombineReducer”（更新了reducer代码以包含它）调用-only-reducer，并由index.js中的存储管理（同时添加）

import React from 'react'
import { useDrag } from 'react-dnd'

const DraggableItem = (props) => {
    const [, drag] = useDrag({
        item: { id: props.id, type: 'IMG' },
    })

    return (
        <div className='image-container' ref={drag}>
            <img src={props.src} alt={props.name} />
        </div>
    )
}

export default DraggableItem

import { combineReducers } from 'redux'

const collectionReducer = (state = [], action) => {
    // state is already updated before the reducer has been run
    console.log('state:', state, 'action: ', action)

    switch (action.type) {
        case 'LOAD_ITEMS':
            return action.payload
        case 'MOVE_ITEM':
            return action.payload
        default:
            return state
    }
}

export default combineReducers({
    items: collectionReducer,
})

export const moveItem = (sourceId, destinationId) => (dispatch, getState) => {
    const itemArray = getState().items
    const sourceIndex = itemArray.findIndex((item) => item.id === sourceId)
    const destinationIndex = itemArray.findIndex(
        (item) => item.id === destinationId
    )

    const offset = destinationIndex - sourceIndex
    //rearrange the array
    const newItems = moveElement(itemArray, sourceIndex, offset)

    dispatch({ type: 'MOVE_ITEM', payload: newItems })
}