Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

What's Redux Anyway?

What's Redux Anyway?

React's community nowadays is all about Redux. But what is it and how can you use it in your React applications? How does it compare to Flux? What are reducers and unidirectional data flow, immutability, stores, thunks...

If none of this makes sense to you don't worry, this talk is for you.

I'm going to explain how Redux came to be, how it changes the way we build applications and how you can use it.

Giorgio Polvara

September 29, 2016
Tweet

More Decks by Giorgio Polvara

Other Decks in Programming

Transcript

  1. “React is a JavaScript library for creating user interfaces by

    Facebook and Instagram. Many people choose to think of React as the V in MVC.”
  2. “Flux is the application architecture that Facebook uses for building

    client-side web applications. It complements React's composable view components by utilizing a unidirectional data flow. It's more of a pattern rather than a formal framework, and you can start using Flux immediately without a lot of new code.”
  3. +

  4. Alt

  5. MVC

  6. MVC

  7. const Root = () => ( <App /> ) AppRegistry

    .registerComponent("App", () => Root)
  8. import { Provider } from 'react-redux/native' const Root = ()

    => ( <App /> ) AppRegistry .registerComponent("App", () => Root)
  9. import { Provider } from 'react-redux/native' const Root = ()

    => ( <Provider store={store}> <App /> </Provider> ) AppRegistry .registerComponent("App", () => Root)
  10. { }

  11. const reducer = (state, action) => { switch(action.type) { case

    'INCREMENT': return {total: state.total + 1 } case 'DECREMENT': return {total: state.total - 1 } default: return state } }
  12. const reducer = (state, action) => { switch(action.type) { case

    'INCREMENT': return {total: state.total + 1 } case 'DECREMENT': return {total: state.total - 1 } default: return state } }
  13. const reducer = (state, action) => { switch(action.type) { case

    'INCREMENT': return { count: state.count + 1 } case 'DECREMENT': return {total: state.total - 1 } default: return state } }
  14. const reducer = (state, action) => { switch(action.type) { case

    'INCREMENT': return { count: state.count + 1 } case 'DECREMENT': return { count: state.count - 1 } default: return state } }
  15. const reducer = (state, action) => { switch(action.type) { case

    'INCREMENT': return { count: state.count + 1 } case 'DECREMENT': return { count: state.count - 1 } default: return state } }
  16. Where to go from here? Create small Redux apps Async

    actions with thunks Check combineReducers
  17. Where to go from here? Create small Redux apps Check

    combineReducers Async actions with thunks …