Embed Size (px)
Citation preview
React+Redux Workshops
Marcin Grzywaczewski (@Killavus) Arkency
What
• An app for managing conferences
• Planning conferences
• Scheduling conference days
• Accepting events from CFP (call for papers)
• Scheduling events within conference days
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
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.
Composing components
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.
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.
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.
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.
Empty App
Initial State
Action Creator
A return value of this function is called an action.
Reducer
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!
Wrongly written reducer (mutation of state)
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.
Components
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?
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.
Dispatch & State mappers
Notice how action creator is used to create an action emitted to a store. It is not a coincidence!
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.
Connector & Connected Component
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.
Provider usage & return value of the GreeterApp
GreeterApp Usage
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!
Good luck!
