REACT & REDUX – tracing the steps…

THE NORMAL REACT STUFF

1. Develop the code which: reads an input and writes to (local) state upon submit.
2. the render() reads from (local) state and lists out the data.
3. This will eventually be the PRESENTATION layer of our App.

THE REDUX STUFF

1. Create a storewhich ties to a reducer
2. Create a reducerwhich performs action based on the type
3. Normally, we dispatch the (Add/Edit) function(s) using store(dot)dispatch
4. Don’t dispatch the function(s)for now

THE REACT meets REDUX STUFF

1. Presentation Component has all the details related to the UI/UX;
2. 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)
3. 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
4. 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)

 

Advertisements