Redux in React

  • Create React App
  • index.js
  • redux folder
    • actions (with index.js inside)
    • reducers (with index.js inside)
  • install redux and react-redux
  • Add Provider
    • Wrap <App> with <Provider> component
  • import { createStore } from redux
  • Create a store

Create reducers like normal and export

Create actions like normal and export each function separately

COMPONENT where we want to dispatch and action
Use connect in export statement

export default connect(null, {addOne, subOne})(Counter);

connect creates a container component. It needs to know 1) which state we want to use and connect to props (first param) and 2) which actions to map to the dispatcher (second param)

It then returns a function that we need to call with the component we want to be the presentational component for the container connect creates.