在调用reducer之前-ReactDnD-redux状态被-不正确地更新

如何解决在调用reducer之前-ReactDnD-redux状态被-不正确地更新

编辑：该错误是一个单独的帮助程序功能，正在改变状态（帖子中未显示）。

---

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

我遇到的问题是重新排列图像后道具没有更新。我一直在调试化简器，并注意到在化简器有机会这样做之前，状态已经以某种方式进行了更新（这将触发mapStatetoProps用更新后的状态重新加载我的组件）。问题是我不知道为什么会这样。我有一种感觉，因为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')
)

App.js（DroppableCell和DraggableItem的父组件）

class App extends React.Component {
    componentDidMount() {
        this.props.loadCollection(imageArray)
    }

    render() {
        return (
            <div className='App'>
                <div className='grid'>
                    {this.props.items.map((item) => (
                        <DroppableCell
                            key={item.id}
                            id={item.id}
                            onMouseDrop={this.props.moveItem}
                        >
                            <DraggableItem src={item.src} alt={item.name} id={item.id} />
                        </DroppableCell>
                    ))}
                </div>
            </div>
        )
    }
}

const mapStatetoProps = (state) => {
    return { items: state.items }
}

export default connect(mapStatetoProps,{
    moveItem,loadCollection,})(App)

DroppableCell （从父组件调用操作创建者）

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

const DroppableCell = (props) => {
    const [,drop] = useDrop({
        accept: 'IMG',drop: (hoveredOverItem) => {
            console.log(hoveredOverItem)
            props.onMouseDrop(hoveredOverItem.id,props.id)
        },})

    return <div ref={drop}>{props.children}</div>
}

export default DroppableCell

DraggableItem

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 })
}

解决方法

发现了该错误-不幸的是，在我发布的代码之外，因为我认为这是一个简单的辅助函数。我意识到我正在使用'splice'方法重新排列imageArray，因此改变了状态。