Я строю react проект для визуализации insertion sort с использованием redux. Я использую react-redux для создания и обработки actions. Однако проблема в том, что в моем алгоритме insertionSort я отправляю действие updateArray каждый раз, когда изменяется сортируемая array. Я поместил print операторы внутри редуктора и увидел, что состояние фактически изменилось и действие было отправлено правильно, однако мой фактический array не рендерится повторно. Я поместил prints внутри функции render() соответствующего компонента пользовательского интерфейса и увидел, что он вызывается только один или два раза, а не каждый раз, когда редуктор получает действие. Я несколько раз пытался реструктурировать свой код и читал о похожих проблемах, которые были у людей, но их ответы мне не помогли.
Я просто структурировал это неправильно? Разве я не должен использовать диспетчеризацию каждую секунду или около того для обновления моего массива?
У меня есть файл main.js, который используется для визуализации компонентов пользовательского интерфейса, включая мой массив:
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, в который я импортирую свои действия изих редукторы и передать в диспетчерскую функцию от 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')
}