| 
									
										
										
										
											2018-10-12 15:37:13 -04:00
										 |  |  | --- | 
					
						
							|  |  |  | title: Extract State Logic to Redux | 
					
						
							|  |  |  | --- | 
					
						
							|  |  |  | ## Extract State Logic to Redux
 | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2019-03-29 16:33:47 +01:00
										 |  |  | ### Solution
 | 
					
						
							| 
									
										
										
										
											2018-10-12 15:37:13 -04:00
										 |  |  | ```javascript | 
					
						
							| 
									
										
										
										
											2019-03-29 16:33:47 +01:00
										 |  |  | // define ADD, addMessage(), messageReducer(), and store here: | 
					
						
							| 
									
										
										
										
											2018-10-12 15:37:13 -04:00
										 |  |  | const ADD = 'ADD'; | 
					
						
							| 
									
										
										
										
											2019-03-29 16:33:47 +01:00
										 |  |  | const addMessage = (message) => { | 
					
						
							|  |  |  |   return ({ | 
					
						
							| 
									
										
										
										
											2018-10-12 15:37:13 -04:00
										 |  |  |     type: ADD, | 
					
						
							| 
									
										
										
										
											2019-03-29 16:33:47 +01:00
										 |  |  |     message | 
					
						
							|  |  |  |   }) | 
					
						
							| 
									
										
										
										
											2018-10-12 15:37:13 -04:00
										 |  |  | } | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2019-03-29 16:33:47 +01:00
										 |  |  | // Use ES6 default paramter to give the 'previousState' parameter an initial value. | 
					
						
							|  |  |  | const messageReducer = (previousState = [], action) => { | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |   // Use switch statement to lay out the reducer logic in response to different action type | 
					
						
							|  |  |  |   switch (action.type) { | 
					
						
							|  |  |  |     case ADD: | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |       // Use ES6 spread operator to return a new array where the new message is added to previousState | 
					
						
							|  |  |  |       return [...previousState, action.message] | 
					
						
							|  |  |  |       break; | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |     default: | 
					
						
							|  |  |  |       // A default case to fall back on in case if the update to Redux store is not for this specific state. | 
					
						
							|  |  |  |       return previousState; | 
					
						
							| 
									
										
										
										
											2018-10-12 15:37:13 -04:00
										 |  |  |   } | 
					
						
							| 
									
										
										
										
											2019-03-29 16:33:47 +01:00
										 |  |  | } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | const store = Redux.createStore(messageReducer); | 
					
						
							| 
									
										
										
										
											2018-10-12 15:37:13 -04:00
										 |  |  | ``` |