https://redux.js.org/api/applymiddleware
https://redux.js.org/api/combinereducers
https://stackoverflow.com/questions/35622588/how-to-reset-the-state-of-a-redux-store
https://react-redux.js.org/using-react-redux/connect-mapstate
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
https://redux.js.org/api/store
We consume data the web API and retrieve data through utility function request. We then pass the data through actions and reducers, which are hooked up to our singleton store. This ensures consistency. We finally use and expose this data in our components.
Intro
We use React Redux to store data into a singleton store.
We do this through createStore, which takes two parameters: reducer and a Thunk Middleware.
|
|
createStore(rootReducer, composeEnhancers(applyMiddleware(thunk))); |
The idea is that middleware is the suggested way to extend Redux with custom functionality. middleware lets you wrap the store’s dispatch method for custom use. Multiple middleware can be combined together, where each middleware requires no knowledge of what comes before or after it in the chain.
The most common use case for middleware is to support asynchronous actions. It does so by letting you dispatch async actions in addition to normal actions. In our case, we use a Redux Think as middleware.
First, a thunk is a subroutine used to inject an additional calculation into another subroutine. In the case of a
Redux Thunk, they are functions that wrap expressions in order to delay their evaluation.
This delay is achieved in when an action is called it returns a function. This function that is returned can then be called at a later time.
Here is an example of a thunk action.
|
|
function incrementAsync() { // the below function is called by Redux Thunk middleware below. return dispatch => { setTimeout(() => { // Can invoke sync or async actions with `dispatch` dispatch(increment()); }, 1000); }; |
A higher order function is just a function that either
1) returns a function
OR
2) takes a function as one of its arguments.
Because this function returns another function that takes dispatch as an argument this is an example of a higher order function. When called at a later time, it passes in dispatch, which the inner function uses.
Hence, when we apply thunk as middleware, and pass this into createStore to signify that when we execute an action, we can have it be applied to the store asynchronously via higher order functions via Redux Thunk.
rootReducers
Now, the thing you’ll see is the rootReducer.
Basically we use the redux function combineReducers to combine all of our reducers into one.
The combineReducers helper function turns an object whose values are different reducing functions into a single reducing function you can pass to createStore.
The resulting reducer calls every child reducer, and gathers their results into a single state object. The state produced by combineReducers() namespaces the states of each reducer under their keys as passed to combineReducers()
The combineReducers function returns a function. That function is a reducer that invokes every reducer inside the reducers object, and constructs a state object with the same shape.
Resetting the store:
|
|
const appReducer = combineReducers({ /* your app’s top-level reducers */ }) const rootReducer = (state, action) => { if (action.type === 'USER_LOGOUT') { state = undefined } return appReducer(state, action) } |
Hence, this is what our store code looks like.
1) We import what we need from redux
2) We import our custom reducer cctv
3) We group our reducers into combineReducers
4) Then as long as the action type is not ‘USER_LOGOUT’, then we return the appReducer for standard action onto the store state.
5) We apply think to our middleware
6) Then pass everything into createStore.
src/store.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
// 1) import { createStore, applyMiddleware, compose, combineReducers, } from 'redux'; import thunk from 'redux-thunk'; // 2) import cctv from './services/api/CCTV/reducers'; const composeEnhancers = (window && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) || compose; // 3) const appReducer = combineReducers({ ... cctv, ... }); // 4) const rootReducer = (state, action) => appReducer(action.type === 'USER_LOGOUT' ? undefined : state, action); // 5), 6) const store = createStore(rootReducer, composeEnhancers(applyMiddleware(thunk))); export default store; |
Custom Action for CCTV
We first start at the action functions. Action functions are imported into Component classes to be executed at certain points. Say you want to read data from an API during the loading up of the component, you’ll execute an action function in its componentDidLoad. You want to do an action after a button press, you’ll execute that action function in the button press’s handler.
The action function is just a function so that it does an action. Let’s take a look at action getCCTV. You’ll see that it takes a parameter transshipment object. We want to manipulate the store asynchronously so we use thunk’s dispatch function. We do this through a higher order function where we return an object. This object is called at a later time by Redux where it executes our commands asynchronously.
We import the function request. We also define macros.
src/services/api/CCTV/action.js
|
|
import { request } from '../request'; import { CCTV_URL } from '../config'; export const CCTV_DATA = 'CCTV_DATA'; export const CCTV_DATA_IS_LOADING = 'CCTV_DATA_IS_LOADING'; export const CCTV_DATA_IS_FINISHED = 'CCTV_DATA_IS_FINISHED'; |
Then we define functions that return action objects, with type property.
src/services/api/CCTV/action.js
|
|
const startLoading = () => ({ type: CCTV_DATA_IS_LOADING, }); const finishLoading = () => ({ type: CCTV_DATA_IS_FINISHED, }); |
In getCCTV, we take a transhipment object first, then we return a function definition with parameter dispatch. This dispatch is provided by Redux, and in which we use it to do asynchronously manipulation in our function definition.
1) Thus, we first pass an action object to signify that we’re loading. We call dispatch on this action object.
|
|
dispatch(startLoading()); // 1) |
Our reducer will receive this action object, where action.type is CCTV_DATA_IS_LOADING.
Then it would update the store state’s property in need.
2) Then, we request data from the web api by calling request.
When it comes back with the result, we create an action object with the retrieved data and then define type to be CCTV_DATA. We call dispatch to apply this data to the store via the reducer object.
|
|
dispatch({ type: CCTV_DATA, data: Data, }); |
In this case, our action.type is CCTV_DATA, and action.data is Data from the web API retrieval. This is what will be sent to the Reducer.
Our reducer checks action.type. Once it matches, it will take care of processing that action. It updates the store on the action.data provided.
src/services/api/CCTV/action.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
export const getCCTV = transhipment => (dispatch) => { dispatch(startLoading()); // 1) const data = { transhipment, }; // 2) request(CCTV_URL, data).then((result) => { const { Data } = result; // 3) dispatch({ type: CCTV_DATA, data: Data, }); }) .catch(() => { dispatch(finishLoading()); }); }; |
Custom Reducer for CCTV
Basically our reducer receives an action object from the action file.
We then check action.type, it will have a string macro.
For every string macro, we take care of that case by updating the store.
src/services/api/CCTV/reducer.js
|
|
export default function reducer(state = INITIAL_STATE, action) { switch (action.type) { case CCTV_DATA: return { ...state, cameras: action.data.Cameras, // important! isCCTVLoading: false, }; } } |
The return means it updates the store object, which then will be used by our component.
Component
ref – https://react-redux.js.org/api/connect#connect
So we import the CCTV action and then assign it to prop object’s property getCCTVAction.
But first, let’s talk about the connect function.
The connect() function connects a React component to a Redux store.
It provides its connected component with the pieces of the data it needs from the store, and the functions it can use to dispatch actions to the store.
Hence, we first define CCTVScreen component as so:
src/scenes/App/CCTVScreen/index.js
|
|
class CCTVScreen extends Component { static navigationOptions = { title: i18n.t('CCTVScreen.screenTitle'), }; constructor(props) {...} componentDidMount() {...} render() {...} } |
You’ll see that we pass CCTVScreen into the connect function via currying.
The connect function does not modify the component class passed to it; instead, it returns a new, connected component class that wraps the component you passed in.
|
|
export default connect(..., ...) (CCTVScreen); |
where definition of connect is:
|
|
function connect(mapStateToProps?, mapDispatchToProps?, mergeProps?, options?) |
mapDispatchToProps
first look at the object for the parameter mapDispatchToProps?
We basically define dispatch actions to our prop object. These are basically functions you can call.
|
|
{ getCCTVAction: getCCTV, resetCCTVAction: resetCCTV, } |
mapStateToProps
Now let’s look at mapStateToProps.
It is defined as so:
|
|
const mapStateToProps = ({ cctv }) => ({ cameraViews: cctv.cameras, isLoading: cctv.isCCTVLoading, }); // defined as: // const mapStateToProps = (state, ownProps = {}) => { } |
So it needs to pass in a property, which we de-structure from the store object. Since we’re working with cctv, we de-structure property “cctv” from the store. This is because cctv is the name of the reducer we used in the combineReducers function.
Remember in our reducer we have property cameras and isCCTVLoading, so we access them through the variable cctv.
Putting it all together
Thus, we put all of this together, which brings us to a connect function that
1) maps state to your props object
2) maps dispatch actions to your props object
3) connects all of that to your component
|
|
export default connect(mapStateToProps, { getCCTVAction: getCCTV, resetCCTVAction: resetCCTV, })(CCTVScreen); |
Using your actions and state
Remember that our cameraViews property in our props object is cctv.cameras.
Hence we extract that property via destructuring.
|
|
const { cameraViews } = this.props; |
our cameraViews is cctv.cameras, where cameras is an array of camera data.
Each camera data contains URL to the camera image, and so forth.
Hence, now that we have our cameraViews array, we’ll use Javascript’s map function to iterate through this array and display the information.
|
|
{ cameraViews.map(camera => ( )) } |
As each camera is processed, we display an Image, and give the URL of the image to the key. Thus, this will successfully display the camera image.
|
|
cameraViews.map(camera => ( <Image key={camera.URL} source={{ uri: camera.URL }} style={styles.cameraContainer} /> )) |
