Please enable JavaScript.

Coggle requires JavaScript to display documents.

Modern JS web app (Redux (store (state, can be more than one used in an…

- - - - thunk
        
        a function that gets store.dispatch from redux-thunk and can use it to dispatch multiple synchronous actions (usually with delay)
        
        usually uses some kind of async function to perform complex operations and dispatch sync actions in every crucial moment (begin, success, fail) #
      - teaches store how to handle thunks as actions
      - passes store.dispatch to each incoming thunk action to expand it to multiple synchronous actions - simple objects with type attribute
    - - persists partial state to localStorage #
- - - - bind
      - call
      - apply
      - method call
      - detached method call
    - - filter
      - reduce
      - every
      - concat
      - find
      - findIndex
      - some
      - map
      - slice
        
        best before sort() :smiley:
  - - - pending
      - rejected
      - fulfilled
- - - - hot reloading
  - - - a lot of ready to use modules
        
        Babel
        
        for compiling ES6/ES7/ES8 etc. (+ JSX) to ES5
        
        ESLint
        
        for finding and fixing potential code issues
    - - init
      - start
      - test
      - install
        
        --save
        
        --save-dev
- - - - route components
        
        IndexRoute
        
        Route
      - Router
        
        history
        
        browserHistory
        
        hashHistory
    - - connect
        
        produces connected component
        
        Connect(Component)
      - Provider
        
        needs a store #
        
        provides the store to nested connected components #
        
        we can have more than one in an app
  - - - lifecycle methods
      - props in this.props
      - state in this.state
      - constructor
        
        super
        
        calls parent class constructor
        
        needs props for proper instantiation
    - - props as function call argument
- - - - Component translates Interaction to Action (recognizable by Reducer) and dispatches it to Store
        
        Store receives Action and passes it to Reducer along with current Application State
        
        Reducer calculates and returns New Application State
        Received state object should be IMMUTABLE - Reducer should not modify received Application State;
        always remember that objects are passed by reference in JS - not by value
        
        Store replaces old Application State by the new one returned from Reducer
        
        Store notifies Connected Components about changes
        
        Connected Components pass Props to their Children which results in UI being updated (re-rendered) #
        
        If an Action is a thunk then it's passed to redux-thunk to decompose it into multiple sync Actions
    - - Stateful Component modifies its own State based on the event triggered by Interaction
        
        State change triggers the Stateful Component re-rendering which updates the UI
        #