Не могу уже долго понять, в чем проблема. Подписался на обновление стейта и при сортировке/удалении элемента в консоле вывожу subscribe'ом текущий стейт. Стейт нормально сортируется. Так, как я и хотел, но на экране все не так. В чем я ошибаюсь?
sortColumn(e) {
this.props.onSortColumn(e);
}
render(){
return (
{this.props.studentsStore.studentsList.map((item, index) =>
<tr className="itemStudent" key={index}>
<td><input type="text" defaultValue={item.name} /></td>
<td><input type="text" defaultValue={item.surname} /></td>
<td>{item.gender}</td>
<td><input type="text" defaultValue={item.age} /></td>
<td>{item.isMarried + ''}</td>
<td><button id="remove" onClick={() => this.removeStudent(index)}>X</button></td>
</tr>
)}
)
}
export default connect(
state => ({
studentsStore: state
}),
dispatch => ({
onSortColumn: (event) => {
dispatch({ type: 'SORT_STUDENT', payload: event.target })
}
}
})
)(App);
Вот редьюсер
const initialState = [
{
name: 'Bill',
surname: 'Tomes',
gender: 'male',
age: 22,
isMarried: true,
},
{
name: 'Hanna',
surname: 'Morton',
gender: 'female',
age: 21,
isMarried: false,
}
];
export default function studentsList(state = initialState, action) {
if(action.type === 'ADD_STUDENT') {
return [
...state,
action.payload
]
}
if(action.type === 'SORT_STUDENT') {
function sortArr(a,b) {
return a.age-b.age;
}
let newArr = state.slice();
if(action.payload.id === 'titleAge') {
newArr.sort(sortArr);
}
return newArr
}
return state;
}
Простой