Question about Redux action creator and reducer

Question about Redux action creator and reducer
0

#1

Resource code: http://hysterical-amusement.surge.sh/, under React-Redux 04 - User Provider to Connect Redux

Does anybody know why in following Redux code, the Redux knows that addMessage is an action and addMessage automatically becomes argument of parameter action in the messageReducer function even without any pre-setting?

2nd question, the messageReducer function always has state = [] as its argument, will this mean whenever the messageReducer fires, the messageReducer always takes empty state array as its first argument? and if after first call, and state becomes not empty, how could messageReducer still take state = [] as its argument when the state is not empty array?

// Redux Code:
const ADD = 'ADD';

const addMessage = (message) => {
	return {
    type: ADD,
    message: message
  }
};

const messageReducer = (state = [], action) => {
  switch (action.type) {
    case ADD:
      return state.concat(action.message);
    default:
      return state;
  }
};

const store = Redux.createStore(messageReducer);

// React Code:

class DisplayMessages extends React.Component {
	constructor(props) {
		super(props);
    this.state = {
      input: '',
      messages: []
    }
	}
  handleChange = (event) => {
    this.setState({
      input: event.target.value
    });
  }
	submitMessage = () => {
		const currentMessage = this.state.input;
    this.setState({
      input: '',
      messages: this.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>
    );
  }
};

const Provider = ReactRedux.Provider;

class AppWrapper extends React.Component {
	// change code below this line
	render() {
		return (
			<Provider store = {store}>
				<DisplayMessages/>
			</Provider>
		);
	}
	// change code above this line
};

#2
  1. When actions are dispatched in redux via the store.dispatch() function, they are actually run through every reducer you passed to your store.createStore() function. The dispatch function will call each of its reducer functions one by one passing in its current state, along with the action u passed it. If your action corresponds to a certain reducer, it will return the modified state and move on. If the action does not have any function for a reducer, it will return it’s unmodified state, as if it slipped it.

  2. The state = [] is ES2015 default function value syntax. I’m terms of redux it’s insurance, a reducer has to return something, so in the event that it’s the initial time running a reducer and the store is blank, the reducer will default to an empty array. This syntax is common with reducers because it keeps with the pattern of always having default: return state in the reducer switch statement, and not having it add an additional if statement for if the stores state is blank.

If you want a more in-depth explanation of how exactly it all works, Dan Abromov (the creator of Redux no less) has a free course on egghead.io where he explains everything.