React Redux


  • What is react and redux
  • How data flows from backend to react UI
  • Type of state
  • Debugging tips

What is react

Possible answer

  • UI library
  • Javascript Framework
  • Open source project
  • Virtual DOM
  • Component based framework
  • JSX

Might be

const react = props: UI => render(props);
const reactDOM = reactElement: DOM => renderToBrowser(reactElement);
const reactNative = reactElement: iOS hierarchy => renderToIOS(reactElement);


  • Write UI with component
  • Declarative way to write UI
  • Manage UI state by state or props
  • Collect user input and manage it by state
  • Update UI when state change

What is redux and why

Cross component communication

How data flows inside redux

Different part of redux

  • action(domain/event, todos/created)
  • reducer
  • selector
  • middleware(redux-thunk)

React state vs redux

  • Any other component care about this state?
  • Do you want to cache the data?

How to split slice for redux

  • Split by domain(global level)
  • Split by components

Testing redux

  • Pure function
  • Composable selector

State from end to end

render -> fetch -> store response -> trigger UI update

Type of the state

  • state from backend
  • state that redux needed
  • state for component(useSelector)
  • state inside component

Type of the state

  • business/domain level
  • UI level

Debugging Tips


Split the program into smaller pieces

  • React Component Props
  • Redux actions and payload
  • Redux state diff
  • Backend Data(Chrome devtool network panel)


Further reading