Please enable JavaScript.

Coggle requires JavaScript to display documents.

Redux - Coggle Diagram

- - - - never mutate arguments
- - - - "do this everytime I call dispatch"
  - - - do anything with action before passing next(action)*
    - - do anything with the return value of the next(action)
  - - - applies as a store enchancer
        
        note: middleware applies globaly, so if a middleware only interested in particular ACTION, use if / switch inside of it!
      - e.g
        createStore(rootReducer, applyMiddleware(mw1, mw2, ..mwn))
    - - e.g
        const myMiddleware = storeAPI => next => action => {
        // do something
        next(action)
        }
      - components
        
        storeAPI
        
        contains store's dispatch & getState
        
        next
        
        a function will be called to pass to the next chain of the middleware
        
        action
  - - - thunk
        
        a function, that returns a function to be called later
        
        will be called by a middleware
        
        dispatch must be pure functions
        
        middleware called redux-thunk
        
        checks if action is a function, if so then execute the action (a function)
        
        action creator returns a function
        
        dispatch normally, but dispatching an action creators that returns an object
- - - - YourComponent
      - mapDispatchToProps
        
        anatomy
        
        dispatch
        
        what?
        
        returns dispatch as props
        
        as object
        
        dispatch:function
        
        function
      - mapStateToProps
        
        anatomy
        
        state
        
        what?
        
        returns state as props
        
        you can filter here
        
        function
    - - allow to perform view & dispatch
      - connects component to provider's store
  - - - store props
    - - wraps on index.js
    - - access to store
      - higher order component
      - HTML/JSX element
- - - - createStore(rootReducer)
    - - viewed by
        
        components
      - modified by
        
        reducer
      - state container
  - - - createStore(rootReducer)
      - combineReducers
        
        object
        
        responsible reducer
        
        modularized
        
        state
    - - action
        
        case what to do and how
      - previousState
        
        initialize state if empty
        
        ideal state shape
        
        arrays (recommended)
        
        key:value for objects
    - - controls store
      - "how state changes"
      - receives orders
  - - - what?
        
        code reuse
        
        returns action
        
        function
    - - describes what happens
      - orders to dispatch
    - - payload
      - type
        
        helps reducer
        
        best if modularized
        
        constant
- - - - right wing keeper
      - left wing keeper