Всем привет, когда мне нужно изменить какую-то часть redux стора, я копирую его в стейт компонента, изменяю его локально, используя setState, а затем одним экшеном отправляю его обратно в стор, это выглядит примерно так:
export class User extends React.Component {
state = {
user: this.props.user,
};
render() {
return (
<div>
<input
value={this.state.user.name}
onChange={this.changeUserName}
/>
<button onClick={this.saveUser}>Save</button>
</div>
);
}
userNameChange = ({target}) => {
this.setState((prevState) => ({
user: {
...prevState.user,
name: target.value,
},
}));
}
saveUser = () => {
const {
userActions,
} = this.props;
const {
user,
} = this.state;
userActions.save(user);
}
}
const mapStateToUserProps = (state) => ({
user: state.user,
});
const mapDispatchToUserProps = (dispatch) => ({
userActions: bindActionCreators(UserActions, dispatch),
})
export const UserContainer = connect(mapStateToUserProps, mapDispatchToUserProps)(User);
Мне кажется, что это позволит избавиться от какой-то доли вызова селекторов (mapStateToProps) и повысит производительность приложения, с другой стороны это противоречит концепциям одного источника правды и изменения данных только в редьюссерах. Я начинал замечать незначительные проблемы этого решения, когда пытался реализовать "оптимистичный интерфейс". Что вы думаете по этому поводу? Выигрыш в производительности не стоит тех проблем, которые могут возникнуть?