Redux Flashcards
Container
- A container does data fetching and then renders its corresponding sub-component. That’s it.
- I call containers React components that are aware of Redux, Router, etc. They are more coupled to the app. Same as “smart components”.
Component (vs Container)
I call components encapsulated React components that are driven solely by props and don’t talk to Redux. Same as “dumb components”. They should stay the same regardless of your router, data fetching library, etc.
Why the spread operator
Since one of the core tenets of Redux is to never mutate state, you’ll often find yourself using Object.assign() to create copies of objects with new or updated values. While effective, using Object.assign() can quickly make simple reducers difficult to read given its rather verbose syntax.
An alternative approach is to use the object spread syntax proposed for the next versions of JavaScript which lets you use the spread (…) operator to copy enumerable properties from one object to another in a more succinct way. The object spread operator is conceptually similar to the ES6 array spread operator.
Subscribe
Subscribing to the store
```javascript
store.subscribe(() => {
// This is called every time anything changes
let currentState = store.getState();
});
~~~
Reducer
The root piece of the app A function that takes 2 args: the current state, and the action Return the new state
```javascript
const initialState = [];
function reducer(state = initialState, action) {
switch (action.type) {
case LOG_EVENT:
return [action.payload, …state];
}
return state;
}
~~~
Action
Representation of what you’re trying to do
```javascript
{
type: ‘SOME_VALUE’ // Required, usually a string
payload: {} // Convention
}
~~~
Hot reloading
- Quand on met à jour un component, l’appli se recharge toute seule
- Quand on met à jour un reducer, il faut un full reload (par défaut)
How reducers work
Everytime you dispatch an action, every single reducer in going to run. Whether you choose to act on that is up to the reducer (ndlr: hence the switch statement)
Actions and Reducers
- Une action est comme un event
- Un reducer est comme un event handler
Main ideas about Redux
- There is a single source of truth
- Just one state object
- The flow of data is unidirectional
- When you dispatch an action, it goes to the store
- The state is read only
- Only getter
- To “set”, you dispatch an action
- It enforces you immutability
- Don’t modify objects, create new copy of objects (efficiently)
- Careful: Nothing prevents you to do mutations
- It’s composable
- “It’s all just functions”
Store
A store holds the whole state tree of your application. The only way to change the state inside it is to dispatch an action on it.
A store is not a class. It’s just an object with a few methods on it. To create it, pass your root reducing function to createStore.
dispatch(action)
Dispatches an action. This is the only way to trigger a state change.
The store’s reducing function will be called with the current getState() result and the given action synchronously. Its return value will be considered the next state. It will be returned from getState() from now on, and the change listeners will immediately be notified
subscribe(listener)
Adds a change listener. It will be called any time an action is dispatched, and some part of the state tree may potentially have changed. You may then call getState() to read the current state tree inside the callback.
getState()
Returns the current state tree of your application. It is equal to the last value returned by the store’s reducer.
connect()
Connects a React component to a Redux store
```javascript
connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])
~~~
