Я использую реаги и редуксы.Когда я делаю сортировку, содержимое не перерисовывается
Код:
case SORT_BY:
//if (action.payload.group_id !== undefined)
groups = state.groups;
groups.map(
(group, groupId) => groupId === action.payload.group_id
? new Group (
group.title, group.tasks.sort(
function (a , b)
{return a.title > b.title;}
)
)
: group
);
return {groups};
Я знаю, что проблема где-то здесь, потому что при редуксе сравнивается старый объект и новый.Когда они сравниваются, они одинаковы.Итак, что я должен сделать, чтобы немедленно измениться?(содержимое изменится, когда я выполню другую функцию.)
Здесь я щелкнул по sortButton в TaskGroup # 1 - содержимое не изменилось
Здесь я добавил новое задание - и содержимое изменилось, а также я получаю список отсортированных заданий
Код приложения (класс реагирования, в котором следует перерисовывать содержимое)
import React, {PureComponent} from 'react';
import {connect} from 'react-redux';
import Group from './Group'
import AddGroup from './AddGroup'
import SortBy from '../components/Sort'
class App extends PureComponent {
render() {
const groups = this.props.groups.map((group, index) => (<Group key={index} index={index} {...group} />));
return (
<div>
<h1>Tasks</h1>
<SortBy/>
<ul>
<AddGroup/>
{groups}
</ul>
</div>
);
}
}
// groups from redux store is mapped to this.props.groups
export default connect(
(state) => ({
groups: state.groups
})
)(App);
Группа js
import React, {PureComponent} from 'react';
import Task from './Task'
import AddTask from './AddTask'
import Sort from './Sort'
import {deleteGroup, reName} from "../actions/group";
import {connect} from "react-redux";
export class Group extends PureComponent {
onDeleteClick = () => {
const { deleteGroup, title } = this.props;
// dispatch action
deleteGroup(title);
};
onRenameClick = () => {
const { reName, title } = this.props;
// dispatch action
reName(title, "group");
};
render() {
// this.props.index contains group id (index in groups array)
const tasks = this.props.tasks.map((task, index) => (
<Task key={index} index={index} group={this.props.index} {...task} />));
return (
<div>
<h2>{this.props.title} <input type="button" value="Delete" onClick={this.onDeleteClick}/><input type="button" value="Rename" onClick={this.onRenameClick}/></h2>
<ul>
<AddTask group={this.props.index} />
<Sort whatToSort={this.props.index}/>
{tasks}
</ul>
</div>
);
}
}
export default connect(null, {deleteGroup, reName})(Group);
Весь код редуктора
import Task from '../models/Task';
import Group from '../models/Group';
import {ADD_TASK, DELETE_TASK, TOGGLE_TASK} from '../actions/task';
import {ADD_GROUP, DELETE_GROUP, RENAME_GROUP} from "../actions/group";
import {SORT_BY} from "../actions/functions";
let g1 = new Group('Základní část',);
let g2 = new Group('Bonusová část',);
g1.addTask(new Task('přeškrtnutí splněného úkolu',true));
g1.addTask(new Task('přidání nové skupiny',true));
g1.addTask(new Task('odstranění skupiny',true));
g1.addTask(new Task('přidání a vypisování atributu počtu bodů ke každému úkolu'));
g1.addTask(new Task('přepočítání bodů při změně stavu (splnění) úkolu'));
g2.addTask(new Task('editace úkolu (názvu)',true));
g2.addTask(new Task('editace skupiny (názvu)',true));
g2.addTask(new Task('řazení úkolů'));
g2.addTask(new Task('řazení skupin'));
const initialState = {
groups: [g1, g2]
};
export default function mainReducer(state = initialState, action) {
let groups;
switch (action.type) {
case ADD_TASK:
// add new task to given group and left other groups intact
groups = state.groups.map(
(group, groupId) => (groupId === action.payload.groupId
? new Group(group.title, [...group.tasks, new Task(action.payload.title)])
: group
)
);
return {groups};
case DELETE_TASK:
groups = state.groups.map(
// removes task (filter group tasks) from given group and left other groups intact
(group, groupId) => (groupId === action.payload.groupId
? new Group(group.title, group.tasks.filter(
(task, taskId) => (taskId !== action.payload.taskId))
)
: group
)
);
return {groups};
case TOGGLE_TASK: {
// update task in given group and left other groups intact
groups = state.groups.map(
(group, groupId) => (groupId === action.payload.groupId
? new Group(group.title, group.tasks.map(
// update given task and left other tasks intact
(task, taskId) => (taskId === action.payload.taskId
? {...task, done: !task.done}
: task
))
)
: group
)
);
return {groups};
}
case ADD_GROUP:
let doesExist = false;
groups = state.groups.map(
(group) =>
{
if (group.title === action.payload.title)
doesExist = true;
return group;
}
);
doesExist
? alert("This tasks group is already exist. Try to choose other name")
: groups.push(new Group(action.payload.title));
return {groups};
case DELETE_GROUP:
groups = [];
state.groups.map(
(group) =>
{
if (group.title !== action.payload.title)
groups.push(group);
return group;
}
);
return {groups};
case RENAME_GROUP:
let newTitle = prompt("Please enter new name of the " + action.payload.type);
groups = state.groups.map(
(group) =>
{
switch (action.payload.type)
{
case "group":
if (group.title === action.payload.title)
group.title = newTitle;
return group;
case "task":
return new Group(
group.title, group.tasks.map(
(task) =>
{
if (task.title === action.payload.title)
task.title = newTitle;
return task;
}
)
);
default:
return group;
}
}
);
return {groups};
case SORT_BY:
//if (action.payload.group_id !== undefined)
groups = [...state.groups];
const newgroups = groups.map(
(group, groupId) => groupId === action.payload.group_id
? new Group (
group.title, group.tasks.sort(
function (a , b)
{return a.title > b.title;}
)
)
: group
);
return { newgroups };
default:
return state;
}
}
Архив со всем моим кодом