REACT & REDUX – tracing the steps…


  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.


  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


  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)


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s