close to 30k stars - More features and stars than flux or relay - Easy to introduce redux on large -scale projects https://github.com/tbaraza/redux-pres Advanced-redux branch
by default - string and numbers are - Using const keyword - Object.freeze() to make an object immutable but this doesn’t work on nested objects - Deep-freeze, Immutable.JS - State is represented as an object - … spread operator used to create copy - https://medium.com/@dtinth/immutable-js-persistent-data-structures-and-structural-sharing-6d163f bd73d2
have API for changing data - Data is never mutated but copied - Faster than using spread operator which is simple - E.g const a = [ “a”, “b”, “c” ] - Const b = List(a) - Const c = set(2, “d”) - https://facebook.github.io/immutable-js/
Faster performance - large - Specific commands to make changes - changes are deliberate - Prevent errors from creeping into code base e.g object referred by a service is modified by another service - Community support
notation - Nested objects are a challenge to modify - Syntax can be unfamiliar - Immutable objects do not work for services that require a regular objects e.g combinedReducers - Spread or rest operators may not work with immutable objects. This depends on the version of Immutable js you are using
- Normalized i.e Data is never repeated - Denormalized i.e Each entry contains the references it needs - Objects are denormalized shape - Updating state is harder when data is repeated - Updates can trigger unnecessary redraws - Reducers are not dry and too complex if denormalized
update the state tree by allocating a reducer to a slice of state. This reducer will be responsible for updating the slice of state specified for the reducer. Why would you need this: - App gets more complex How does it work - Takes in different reducer functions and returns a single reducer that you pass to createStore. - The resulting reducer calls every child reducer and gathers their results into a single state object.
must return state given to it as the first argument. - It must never return undefined. - If state given to it is undefined, it must return initial state for the specific reducer - Refer to one of the redux modules: count or signup
best practises - Simple and easy to understand - Already familiar to most developers - Suitable for simple projects, prototypes Disadvantages - Single reducer can’t work on multiple parts of the state - Does not work on non-object states - Does not work with immutable.js-based states - Not suitable for very large projects
as described in docs http://redux.js.org/docs/recipes/reducers/BeyondCombineReducers.html - Using slice reducers with Immutable.js objects - Suggestion: redux-immutable - Sharing data between slice reducers - Suggestion: Create custom function to pass the needed data as arguments to the reducer - Put more data into an action - Ordering of slice reducer calls - Check out Redux Addons Catalog - Write your own custom function that solves your case
an action, and the moment it reaches the reducer. Why Use them: - Manages the side effects - Pre-process actions - Track and debug an application - Keep special logic out of action creators - Isolate API communications
you to create action creators that return a function instead of an action i.e object - Redux Saga - Runs asynchronous processes - Redux Promise - Allows Promises to be passed to dispatcher - Redux Logger - Log actions to console - Redux Reporter - Report activities to 3rd parties - Redux Undo - Revert to previous states
of code; i.e the function has to be invoked. In Redux thunk can be used to: - delay the dispatch of an action or dispatch once a condition is met. - Allow action creators to return a function instead of an object - Preprocess state Takes Dispatch and getState as arguments An example of thunk is selectors https://github.com/gaearon/redux-thunk
beginning of your application and continuously waits for events and actions. This is a middleware that manages side effects Responds to actions in the either of the following ways: - Dispatching new action with results - Side effects. E.g calling an external API Uses yield keyword - used in generator functions https://redux-saga.js.org/
passed a bundle of sagas which are then initialized - Middleware which has saga is added to store - Whenever an action is dispatched it is passed via middleware to the saga - The saga then executes - The process repeats indefinitely