Ререндер происходит после клика в другую область
const messagesReducer = (state = initialState, action) => {
switch (action.type) {
case UPDATE_NEW_MESSAGE_BODY:
state.newMessageBody = action.body;
return state;
case SEND_MESSAGE: {
let body = state.newMessageBody;
state.newMessageBody = '';
state.messages.push({ id: 5, message: body });
return state;
}
default:
return state;
}
};
export const updateNewMessageBodyCreator = (body) => {
return {
type: UPDATE_NEW_MESSAGE_BODY,
body: body
};
};
export const sendMessageCreator = () => {
return {
type: SEND_MESSAGE
};
};
Дальше контейнерная компонента
import { updateNewMessageBodyCreator, sendMessageCreator } from '../../../../../redux/messages-reducer';
import { connect } from 'react-redux';
const mapStateToProps = (state) => {
return {
newMessageBody: state.newMessageBody
};
};
const mapDispatchToProps = (dispatch) => {
return {
updateNewMessageBody: (body) => {
dispatch(updateNewMessageBodyCreator(body));
},
sendMessage: () => {
dispatch(sendMessageCreator());
}
};
};
const NewMessageAreaContainer = connect(mapStateToProps, mapDispatchToProps)(NewMessageArea);
export default NewMessageAreaContainer;
И презентационная
const NewMessageArea = (props) => {
let newMessageBody = props.newMessageBody;
console.log('newMessageBody:', props.newMessageBody);
let onSendMessageClick = () => {
props.sendMessage();
};
let onNewMessageChange = (e) => {
const body = e.target.value;
props.updateNewMessageBody(body);
};
return (
<div className={cl.areaWrapper}>
<input className={cl.input}
value={newMessageBody}
onChange={onNewMessageChange}
type="text"
placeholder='Enter your message' />
<button onClick={onSendMessageClick} className={cl.button}>Send</button>
</div>
);
};
export default NewMessageArea;
Вот тут console.log('newMessageBody:', props.newMessageBody); undefined, проблема тут, но как ее решить я не знаю. Подскажите пожалуйста