Tell us what’s happening:
My code runs well. The problem I am facing here is not about the code, but its logic. I understand React quite well, and I have used it earlier in a couple of projects too. But, as you might have expected I had not used it with Redux. I am new to Redux. However, I find the challenges in FCC easy, but I have not yet understood about its usage clearly. I always feel that though Redux is being used, it is highly redundant and all the things are only being managed by React, as I was doing earlier without Redux too.
In the code below, I completed challenge successfully, but I don’t understand the importance of Redux here. I inserted console.log() to check the order of functions during execution. But I found that the console.logs in Redux are only executed in the beginning, and not with any actions, like submitting or typing message. This feels to me like Redux is completely redundant, as the state initially is always empty, and it never outputs ADD in console. So, I am not able to understand the usage and importance of Redux here, or generally anywhere. I also don’t understand the actionCreator and actionReducer used in REDUX. Also, since the action creators are just like other functions, how does Redux identify it as action creator, because it is not used or called anywhere else in the code. Please help me understand.
**Your code so far**
// Redux:
const ADD = 'ADD';
const addMessage = (message) => {
console.log("IN ACTION CREATOR");
return {
type: ADD,
message: message
}
};
const messageReducer = (state = [], action) => {
console.log("IN REDUCER")
switch (action.type) {
case ADD:
console.log("ADD"); //THIS STATEMENT NEVER PRINTS
return [
...state,
action.message
];
default:
console.log("DEFAULT"); //ALWAYS GOES HERE.
return state;
}
};
const store = Redux.createStore(messageReducer);
// React:
class Presentational extends React.Component {
constructor(props) {
super(props);
this.state = {
input: '',
messages: []
}
this.handleChange = this.handleChange.bind(this);
this.submitMessage = this.submitMessage.bind(this);
}
handleChange(event) {
console.log("HANDLE CHANGE")
this.setState({
input: event.target.value
});
}
submitMessage() {
console.log("SUBMIT MESSAGE");
this.setState((state) => {
const currentMessage = state.input;
return {
input: '',
messages: state.messages.concat(currentMessage)
};
});
}
render() {
return (
<div>
<h2>Type in a new Message:</h2>
<input
value={this.state.input}
onChange={this.handleChange}/><br/>
<button onClick={this.submitMessage}>Submit</button>
<ul>
{this.state.messages.map( (message, idx) => {
return (
<li key={idx}>{message}</li>
)
})
}
</ul>
</div>
);
}
};
// React-Redux:
const mapStateToProps = (state) => {
console.log("IN STATE TO PROPS")
return { messages: state }
};
const mapDispatchToProps = (dispatch) => {
console.log("IN DISPATCH TO PROPS");
return {
submitNewMessage: (newMessage) => {
dispatch(addMessage(newMessage))
}
}
};
const Provider = ReactRedux.Provider;
const connect = ReactRedux.connect;
// Define the Container component here:
const Container = connect(mapStateToProps, mapDispatchToProps)(Presentational);
class AppWrapper extends React.Component {
constructor(props) {
super(props);
}
render() {
// Complete the return statement:
return (
<Provider store={store}>
<Container/>
</Provider>
);
}
};
**Your browser information:**
User Agent is: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:88.0) Gecko/20100101 Firefox/88.0.
Challenge: Connect Redux to the Messages App
Link to the challenge:
).