Please enable JavaScript.
Coggle requires JavaScript to display documents.
React - Coggle Diagram
React
Redux
reducers: build a new state according to the action
function myReducer(prevState, action) {
return newSate;
}
combineReducers()
actions: every change is describled as an action
{
type: 'queryUser',
payload: { id: '123' }
}
action creators
function addToDo({task}) {
return { :
type: 'ADD_TODO',
payload: { task, completed: false}
}
}
store: create a store with a reducer, dispatch an action with the store, the reducer will update the state.
store = createStore(reducer);
store.dispatch(actionCreator(payload));
-
-
-
-
react-redux can be used together: useSelector to get state, useDispatch to dispatch actions and make changes to the state
React Component
-
-
-
-
RULE: props should be readonly, pure function
-
JSX
-
-
-
use dom property name convention for the attribute
className, tabIndex
xml convention
escape any values embedded to prevent XSS
State & Lifecycle
-
lifecycle
-
-
-
getSnapshotBeforeUpdate, componentUpdate
-
-
-