时间戳

首页 > 解决方案 > 根据 reducer 状态更改发出动画 ui

javascript - 根据 reducer 状态更改发出动画 ui

问题描述

我正在构建react一个insertion sort使用redux. 我react-redux用来创建和处理actions. 然而，问题是在我的算法中，每次排序发生变化时insertionSort我都会调度一个动作。我将语句放在减速器中，并看到状态实际上正在发生变化，并且动作正在正确分派，但是，我的实际并没有重新渲染。我将相关的 UI 组件的函数放入其中，发现它只被调用一次或两次，而不是每次 reducer 接收到动作时。我尝试多次重组我的代码并阅读人们遇到的类似问题，但他们的答案对我没有帮助。updateArrayarrayprintarrayprintsrender()

我只是以错误的方式构建这个吗？我不应该每秒钟左右使用一次调度来更新我的数组吗？

我有一个main.js文件用于呈现 UI 组件，包括我的数组：

class Main extends React.Component {
     setArray = () => {
         this.props.setArray(50, window.innerHeight / 1.4)
     startSort = () => {
         this.props.startSorting(this.props.algorithm, this.props.array)
     }
     render() {
         let { array} = this.props
         return (
             <div>
                 <Navbar
                     startSort={this.startSort}
                     setArray={this.setArray}
                 />
                 <MainWrapper>
                     <Row />
                 </MainWrapper>
             </div>
              )
          }
      }
 const mapStateToProps = state => {
    return {
         array: state.array,
      }
  }

 const mapDispatchToProps = dispatch => {
     return {
         setArray: (length, height) => {
              let array = Array.from({ length: length }, () =>
              Math.floor(Math.random() * height))
              dispatch(setArray(array))
         },
         startSorting: (algorithm, array) => {
              var doSort
              if (algorithm == 'insertionSort') {
                  doSort = insertionSort
               }
              doSort(array, dispatch)
       }
     }
  }

我的实际数组是用Row.js

class Row extends React.Component {
    generateNodes(array) {
        var elements = []
        array.forEach((value, index) => {
            elements.push(
                <CenteredColumn>
                    <ArrayNode idx={index} value={value} />
                </CenteredColumn>
            )
        })
        return elements
        }
    render() {
        let { array } = this.props
        console.log('UPDATED ARRAY: ' + array)
        var arrayElements = this.generateNodes(array)
        return <RowWrapper>{arrayElements}</RowWrapper>
    }
}

const mapStateToProps = state => {
    return {
        array: state.array
    }
}

最后，我的实际算法是insertionSort.js从他们的 reducer 导入我的操作并从以下位置传递一个调度函数main.js：

function delayedInsertion(array, dispatch) {
let n = array.length
var i = 0
function loop() {
    setTimeout(function() {
        var temp = array[i]
        var j = i - 1
        while (j >= 0 && array[j] > temp) {
            array[j + 1] = array[j]
            j--
        }
        array[j + 1] = temp
        // console.log('ARRAY: ' + array)
        dispatch(updateArray(array))
        i++
        if (i < n) {
            loop()
        }
    }, 200)
}
loop()
console.log('DONE')
}

标签： javascriptreactjsreduxreact-redux

解决方案

看来你正在改变你的状态。

您正在传递this.props.array您的doSort操作，并且我正确理解您的想法，您只是delayedInsertion从该操作调用（您没有发布该操作的源代码）。但是，delayedInsertion当您更改项目的位置时，您正在改变传递的数组，这里：

while (j >= 0 && array[j] > temp) {
   array[j + 1] = array[j]
   j--
}
array[j + 1] = temp

您需要对数组执行不可变的更改。

推荐阅读