Section 1: App Mockup and Approach
This App I am going to be focusing on is going to be using the Redux framework.
- We have to figure out what Redux is and figure out how we are going to apply it to this application.
- We must figure out a way to render a list of the elements in a performance or ay least performance conscious manner long list of data on mobile devices are notorious for grinding applications to a halt.(In the past, we use map function to make a short list but map is slow once we start to get a lot of items).
- We have to figure out animation.
Mockup:
|
1 |
react-native init tech_stack |
Section 2: The basic of Redux
A very useful tool(Has direct access to Redux Libray): https://stephengrider.github.io/JSPlaygrounds/
This is a diagram of exactly how Redux works
Example: this example split ‘asdf’ into an array and store it in state.
Code and explaination
A question: why don’t just split a string directly like this?
ANSWER: Redux is one of the best libraries in existence for scaling an application to be very large with the least amount of code complexity.
In the other words, as your apps start to grow start to get more features redux will help you write code and your code doesn’t also have to grow in complexity. The core to achieve this is action system which give us the ability to make predictable changes to the state of our application. We will never ever reach directly into our store you know reach directly in to this thing will start messing the state. Instead we will create an action and actions modify our state in one very particular way. That means that we can only modify our application state in a very finite number of ways.
Notice we always return brand new objects from reducers.
Section 3: Boilerplate
|
1 |
npm install --save redux react-redux |
Redux is not made for React and react-redux is the communication glue between redux and react to make them simply work together.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
import React from 'react'; import { View } from 'react-native'; import { Provider } from 'react-redux'; import { createStore } from 'redux'; import reducers from './reducers'; import { Header } from './components/common/'; const App = () => { return ( <Provider store={createStore(reducers)}> <View> <Header headerText = "Tech Stack"/> </View> </Provider> ); }; export default App; |
Notice a Provider tag can only include one child tag.
Here is the reducer:
|
1 2 3 4 5 |
import { combineReducers } from 'redux'; export default combineReducers({ libraries: () => [] }); |
In this app we have two main variables (states):
- List of libraries
- Current selected library
So we are going to make two producers which are Library Reducer and Selection Reducer:
The library reducer will be responsible for producing our list of libraries to show to the user. So it will be an array of object and each object include an id and name. The selection reducer will track the current expanded library has to show the user.
