React Grid Redux Интеграционное состояние редукса не обновляется при изменении сетки
Я пытаюсь реализовать React Grid на основе этого примера, используя Redux для управления состоянием магазина с изменениями исходного кода примера, основанного на структуре приложения Redux. Но когда я внесу изменение, скажем, например, "отсортировать" таблицу, она не будет обновлена в магазине, и, следовательно, сетка не будет отсортирована.
Это компонент сетки.
class Phases extends Component {
changeSorting() {
this.props.createGridAction('sorting', this.props.grid.sorting);
}
render() {
const { phases, grid } = this.props;
console.log(grid);
return(
<Paper>
<Grid
rows={rows}
columns={columns}
>
<SortingState
sorting={grid.sorting}
onSortingChange={this.changeSorting.bind(this)}
/>
<IntegratedSorting />
<Table />
<TableHeaderRow showSortingControls />
</Grid>
</Paper>
);
}
}
function mapStateToProps(state) {
return {
grid: state.phases_grid
}
}
export default connect(mapStateToProps, actions)(Phases);
Это файл действий.
import { PHASES_GRID_STATE_CHANGE_ACTION } from './types';
export function createGridAction(partialStateName, partialStateValue) {
return {
type: PHASES_GRID_STATE_CHANGE_ACTION,
partialStateName,
partialStateValue
};
}
И редуктор.
import { PHASES_GRID_STATE_CHANGE_ACTION } from '../actions/types';
const gridInitialState = {
sorting: []
}
export default function(state = gridInitialState, action) {
switch (action.type) {
case PHASES_GRID_STATE_CHANGE_ACTION:
console.log(action);
const nextState = Object.assign(
{},
state,
{
[action.partialStateName]: action.partialStateValue,
},
);
return nextState;
default:
return state;
}
}
У меня также есть codeandbox с включенным расширением Redux DevTools, где видно, что сортировка не работает.
Что мне здесь не хватает? Любая помощь будет высоко ценится!
1 ответ
И как только я все это напечатал, я понял глупую ошибку, которую я совершил. Вместо того, чтобы передавать обновленное состояние сортировки, я продолжал передавать начальное состояние.
Так что функция должна быть
changeSorting(sorting) {
this.props.createGridAction('sorting', sorting);
}
Если кто-то еще столкнется с чем-то глупым!