action;
export const ON_MESSAGE = 'ON_MESSAGE';
export const sendMessage = (text, sender = 'user') => ({
type: ON_MESSAGE,
payload: { text, sender },
});
reducer:
import { ON_MESSAGE } from 'Redux/actions/Chat_action';
import { act } from 'react-dom/test-utils';
const initalState = [{ text: [] }];
const messageReducer = (state = initalState, action) => {
switch (action.type) {
case ON_MESSAGE:
return [...state, action.payload];
default:
return state;
}
};
export default messageReducer;
combine reducer:
import Chat from 'Redux/reducers/Chat_reducer';
export default combineReducers({
Chat,
});
store:
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './rootReducer';
export default function configureStore(initialState) {
return createStore(rootReducer, applyMiddleware(thunk));
}
and code:
const Chat = props => {
const dispatch = useDispatch();
const messages = useSelector(state => state.Chat);
const [text, setText] = React.useState('');
console.log(messages);
return (
<Styled.ChatBox>
<Styled.ChatHeader>
<p>Chat Bot</p>
<div>
<FontAwesomeIcon icon={faAngleDown} size="1x" color="white" />
<FontAwesomeIcon icon={faTimes} size="1x" color="white" />
</div>
</Styled.ChatHeader>
<Styled.ChatLog>
{messages.map(message => (
<Styled.ChatMessage>{message.text}</Styled.ChatMessage>
))}
</Styled.ChatLog>
<Styled.ChatInput>
<textarea
value={text}
onChange={e => setText(e.target.value)}
placeholder="Digite aqui sua mensagem"
/>
<button onClick={() => dispatch(sendMessage({ text }))}>
<FontAwesomeIcon icon={faPaperPlane} size="lg" color="black" />
</button>
</Styled.ChatInput>
</Styled.ChatBox>
);
};
basically my initial message appears normally in my chat body but when I type a message and use the dispatch I get the following errors:
Uncaught Error: Objects are not valid as a React child (found: object with keys {text}).
and
The above error occurred in the component:
the problem is here:
<Styled.ChatLog>
{messages.map(message => (
<Styled.ChatMessage>{message.text}</Styled.ChatMessage>
))}
</Styled.ChatLog>
The problem is that your action is expecting individual parameters but you are passing a single object
export const sendMessage = (text, sender = 'user') => ({
type: ON_MESSAGE,
payload: { text, sender },
});
dispatch(sendMessage({ text }))
Because of this, your reducer shape is actually [{ text: { text: "..." } }]
instead of [{ text: "..." }]
This means that message.text
is actually an object { text: '...' }
, causing the error:
<Styled.ChatMessage>{message.text}</Styled.ChatMessage>
To fix this, you need to pass values as individual parameters to your action, like so:
dispatch(sendMessage(text))
Oops could you help me with one more thing? I'm a little confused as to how I could send a set message that was a user who sent it in relation to the reducer I will probably have to make a middlware to return if it is a bot or not with the value