My notes on React redux and it's usages

React-Redux.md

Redux

• Redux is a library that manages states. Based on functional principals it solves a problem of data flow in an interesting way.
• In an app your data should have a unidirectional flow. The data flows forward, it never comes back.
• A data with changed properties is not same data (Autovalue), it can be a different copy object.
• In redux, you pass an action, A reducer listens to action and changes store connects both acion and reducer
• actoin: Must have a string, can optionaly have any type of payload.
• reducer: Must return a state, it can never throw error or return undefined thing.
  • In any error case or un-recognized action, it should return previous state passed.
• store: Allows to subscribe/unsubscribe updates, can read current state at any time and sends actions to reducers

React-Redux

• mapStateToProps recieves state from redux, requires a function that converts state to props and return prop that was converted by function.
• mapDispatchToProps recieves dispatch methods, Useful to bind listeners that sends actions to state.

Connect Redux binding to components

• It's better to use map... methods in the components itselves.
• Only export default should be connect method.
• Use PropTypes to define properties our components are interested in, and passed through redux.
• Unless you want to store Navigation state in Redux. Don't involve Redux in Navigations, keep them as it is.

Other points

• propTypes: Validation rules for your state objects. With it, we can define rules that ensures our property respect not only types but also that they are required or not
• ref: Where a child can broadcast itself to parent. -Parent can use some property to modify dom or do some other combining it's props and whatever ref is broadcasting
• To pass store in whole app, wrap <Provider> around App..

Middleware

• Redux by default is Syncronous, to use asyncronous code using redux we need something called middleware.
• Middleware is anything which is between Framework receiving request and Framework sending response.
  • For example, in Android OkHttp and their interceptors are middleware.
• If middlewares are in chain, one middleware's output is other middleware's input. For whole chain, it's input goes to first middleware and it's output is the output of last middleware in chain.
• From here, we refer next = store.dispatch.
• Redux middleware. Its a function into function into function. Outermost function accepts store, which returns an inner function that accepts next, which returns an inner function that accepts action.
• We can call a middleware during a setup calling applyMiddleware method and pass all our different middlewares there. They are all guaranteed to be chained.
  • The inner function should call next method to action and should return the value. Can do anything inbetween doing that.