THE NORMAL REACT STUFF
- Develop the code which: reads an input and writes to (local) state upon submit.
- the render() reads from (local) state and lists out the data.
- This will eventually be the PRESENTATION layer of our App.
THE REDUX STUFF
- Create a storewhich ties to a reducer
- Create a reducerwhich performs action based on the type
- Normally, we dispatch the (Add/Edit) function(s) using store(dot)dispatch
- Don’t dispatch the function(s)for now
THE REACT meets REDUX STUFF
- Presentation Component has all the details related to the UI/UX;
- mapStateToProps
- helps MAPS the STATE to PROPS (when we replace STATE by PROPS)
- This is for FETCHING Data from the Redux Store
- put the properties here which you want to return and print on the screen
- This is where you replace this.state.propertyName by this.props.propertyName
- here we declare what pieces of state you want to have access to (we got access to message only)
- mapDispatchToProps
- helps MAPS the DISPATCH to PROPS (when we replace STATE by PROPS)
- here we declare which action creators you need to be able to dispatch (we got access to subitNewMessage only)
- in React: upon a click event, we used to update the state like setState( messages: this.state.messages.concat(currentMessage) )
- Now, to use Redux: We do props.submitNewMessage(currentMessage)
- submitNewMessage didn’t exist before, this is defined inside the mapDispatchToProps function
- connect
- used for bringing it all together
- Container is used to connect state & dispatching with the
basic Code for react redux (as per listing above)