This document discusses using React and Redux to build an app for managing conferences. It describes building a conference scheduling app with React components to define the UI and Redux to manage shared state. Redux uses a central store with actions and reducers to update the state, which is then mapped to props and passed to React components. Key aspects covered include creating React components, action creators, reducers, connecting React to Redux with the connect function, and rendering the app with a Provider component wrapping the connected components.

1. React+Redux
Workshops
Marcin Grzywaczewski (@Killavus)
Arkency

2. What
• An app for managing conferences
• Planning conferences
• Scheduling conference days
• Accepting events from CFP (call for papers)
• Scheduling events within conference days

3. How
• React.js and Redux will be used to create an
interface
• HTML Mockups are prepared so you can base on
it (I’ll be happy if you experiment with your own
solutions, though)
• Project with an API and all needed libraries is
provided
• One view = one React.js+Redux application

4. React.js
• Responsible for rendering HTML.
• A function which takes properties and returns HTML.
• You create components which are small pieces of your
interface and you compose them together.
• React.js uses JSX syntax, which is very similar to
HTML.
• There is a concept of state, but thanks to Redux it is
unnecessary.

5. Component as function
JSBin Code

6. Component as React class
JSBin Code

7. Composing components

8. How to make it dynamic?
• You can’t change props!
• You can call ReactDOM.render again. It is fast,
thanks to React.js internal algorithms.
• There is a concept of state, but we won’t use it
beacuse you don’t need it.

9. Dynamic component?
JSBin Code

10. What if…
• You can have some piece of data needed to
render a component.
• Every time a piece of data changes you re-
render your component. Your component is
notified somehow about the change.
• This is what Redux will provide to us.

11. Redux
• Manages the data flow in your application.
• You emit actions which are like parameters for Rails
update endpoint (but named!). Actions are created by
action creators.
• Actions modify state.
• State is stored within a store.
• How an action modifies state is determined by a
reducer.

12. Greeter with React+Redux
• A function is called an app when contains:
• React components
• Redux building blocks
• Let’s create a GreeterApp, step by step.

13. Empty App

14. Initial State

15. Action Creator
A return value of this function is called an action.

16. Reducer

17. Reducer recap
• A reducer is a function which takes the current
state and an action and returns the new state
based on an action processed.
• The return value must be a new object. No
mutated values allowed!

18. Wrongly written reducer
(mutation of state)

19. Store
You may consider store as a Redux internal thing.
All you need to do is to pass a reducer and initial state and
you are done.

20. Components

21. Components recap
• The new property will be passed -
nameChanged which is a function passed to
onChange of GreeterEdit.
• Components are blissfully unaware of being
managed by Redux ;).
• But how to connect React + Redux together?

22. Connecting React & Redux
• To connect React.js components with Redux stores
you need create a connector.
• Connector is a pair of state mapper and dispatch
mapper.
• State mapper takes your state and produces an object
which will be merged to component’s properties.
• Dispatch mapper exposes dispatch function which
passes actions to a store. It returns an object which
will get merged to component’s properties too.

23. Dispatch & State mappers
Notice how action creator is used to create an action emitted
to a store. It is not a coincidence!

24. connect function
• connect function takes your state mapper and
dispatch mapper and creates a connector. It is a
function.
• To make your component connected you just
pass a component as an argument to a
connector.

25. Connector & Connected
Component

26. Provider
• We know how to map state to properties and
we’re exposing functions for dispatching
actions. But we don’t know where to dispatch
our actions!
• There is a Provider component. You wrap your
connected component with it. It takes store as a
property.

27. Provider usage & return
value of the GreeterApp

28. GreeterApp Usage

29. GreeterApp Code
JSBin Code

30. Summary
• React.js is great for defining your user interface in
the declarative way.
• Redux is great for managing the data flow in a
simple way.
• You can connect the two together, removing the
problem of updating React components.
• Component’s built-in state is not needed. It is the
most troubling part of React components!

31. Good luck!