- redux
- The base object Model
- The 'store'
- Like Database
- Schema of the data aka 'state'
- All Views MUST subscribe to it
- The 'createStore(reducer, middleware)' method
- The 'reducer': A 'combineReducer()' object
- An Aggregation of all reducers in the application
- The 'reducer': A 'combineReducer()' object
- The 'store'
- 1.a.
- The @reduxjs/toolkit
- The 'configureStore()'
- The 'reducer'
- Used to Monitor all actions dispatched from View because this will contineously executed at global level with store
- Based on Output Action action update the State in Store
- The 'combineReducer()', used to aggrigate all reducer functions to manage Store Updates
- The redcuer function is 'Pure' function
- Two Parameters
- P1: The State aka initialState
- P2: The 'Action Type'
- The Action Dispatched from View
- Two Parameters
- THis cannot be called directly
- Practices
- This is used to update store only
- No Date/Time Operations
- No Ajax calls as well as other network access
- THis can query to Store for following
- Delete a record from store
- Search a record
- Update a record
- We may have a seperate reducer function for each action method dispatched from View
- Recommendations
- Combine all reducers in a single object
- Recommendations
- The 'reducer'
- The base object Model
function myreducer(state,action){
retrun{
...state,
stateObject: action.payload,
otherInfor:values
}
}
- react-redux
- The 'Provider'
- A Driver that manages an integration between React-Native and Redux
- THis has 'store' property, that accepts the REDUX-STORE that is ctreated using 'createStore()'
- A Driver that manages an integration between React-Native and Redux
- useDisapatch()
- a hook used to dispatching an action from View
- The 'Provider'
let dispatch = useDispatch();
dispatch(action_mathod(payload)); // ONE_WAY_CALL
- useSelector()
- Subscription of View to Store
- Check if Store Available
- Map the Current Component with Store
- Map the 'state' of the Component with 'state' from store
let stateData = useSelector(state=>state.REDUCER_THAT_UPDATE_STATE)
- the 'stateData' is actual data received from the Store
- Old Redux
- mapStateToProps
- Old representation of 'useSelector()'
const mapStateToProps=(state)=>{
products: state.REDUCER_NAME
};
- mapDispatchToProps
- Old Represetation of 'useDispatch()'
const mapDispatchToProps=({
getProducts: getProductsFrom
});
- getProductsForm: is an actual action method
- getProducts: The props that will be used by component on UI event
- The 'connect()' object
- COnnect React-Native with Redux
export default connect(mapStateToProps, mapDispatchToProps)(COMPONENT_NAME);
- Action
-
A Function that is dispatched from View
- This may have Input parameter (This is known as 'Payload')
- The Action always return a 'Complex-Type'
- { type:'ACTION_TYPE', payload }
- The 'payload' will be updated into Store by reducers
-
Practices
- a. No complex Logic e.g. AJAX Calls, any other network operations
- b. Perform only Sync operations
- c. No Access to System Storage e.g. indexedDB, Sqlite, WebSQL, etc.
- d. No Access to View Elements
-