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.
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.
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.
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!
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.
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.
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!
