Remote CRUD

Redux General

Actions

• Actions: payloads of information that send data from your application to your store. This is where our store is getting its information.
• Actions are JS objects and must have a type property that shows the type of action they can perform, typically defined as string constants.
• Structure of an action object is our choice (other than type).
• Action Creators are functions that create actions. They are portable and easy to test.
• They can be asynchronous and have side-effects.
• In general, "actions" represent the facts about "what happened".
• Reducers tell us how the application's state changes in response to actions sent to the store. Actions only tell us what happened and not how the application's state changes.
• In Redux, all the application state is store in a single object.
• Reducer composition is the fundamental pattern of building Redux apps.
• In general, _reducers _update the state according to the actions.

Store

• The store is the object that brings actions and reducers together.
• Store holds the application state, it allows us access to state via getState();, it allows state to be updated via dispatch(action);, it registers listeners via subscribe(listener);, and it handles unregistering of listeners via the function returned by subscriber(listener).
• We only have a single store in a Redux app.

Data Flow

• Redux revolves around unidirectional data flow, meaning that all the data in an application follows the same lifecycle pattern. This makes the logic of our application more predictable and easier to understand.
• The data lifecycle in a Redux app follows these steps:

1. You call store.dispatch(action)
2. The Redux store calls the reducer function we gave it. The store will pass two arguments to the reducer: the current state tree and the action.
3. The root reducer may combine the output of multiple reducers into a single state tree.
4. The Redux store saves the complete state tree returned by the root reducer. This new tree is now the next state of our application.

React Router

• Redux Router is a library that lets us keep the state of our URL inside our redux store. It uses the same API with React Router API, but has a bit less support than react-router.
• Redux is our source for our data.
• React Router is source for our URL.
• React Router Redux creates a binding between our redux app and react-router, as well as keeping them in sync. If we don't have the binding, we can't rewind the actions with Time Travel.