12. JS
Движок JavaScript Core.
Babel под капотом и свой
react-native пресет
Поддержка ES6 и ES7 фич
Полифиллы для ES6-ES7 методов
Object, Array и String;
а также для XMLHttpRequest, fetch,
консоли, тайм-аутов и тд.
56. erikras/ducks-modular-redux
import { createAction, handleActions } from 'redux-actions'
import { moduleName } from './config' // moduleName = 'todosModule'
const initialState = {todos: []}
// MAY export action type, if it should be accessible
// in other parts of the app (e.g. redux-saga or other module)
const TODO_ADD = `${moduleName}/TODO_ADD`
// MUST export creators
export const addTodo = createAction(TODO_ADD)
// MUST export reducer as default
export default handleActions({
[TODO_ADD]: (state, {payload}) => ({todos: […state, payload]})
}, initialState);
// selectors, sagas, epics etc. MAY also be named export
redux/modules/todos/index.js
57. import { createSelector } from 'reselect'
import { moduleName } from ‘./config'
export const getTodos = state => state[moduleName].todos
export const getVisibilityFilter = state => state[moduleName].filter
export const getVisibleTodos = createSelector(
[getTodos, getVisibilityFilter],
(todos, visibilityFilter) => {
switch (filter) {
case 'SHOW_ALL':
return todos
case 'SHOW_COMPLETED':
return todos.filter(todo => todo.completed)
case 'SHOW_ACTIVE':
return todos.filter(todo => !todo.completed)
}
}
)
// todoList.js | import * as todosSelectors from '@modules/todos/selectors'
redux/modules/todos/selectors.jsreactjs/reselect
61. Хелперы / Эффекты
• take (watcher)
• takeLatest (cancels previous)
• takeEvery
• call (blocking)
• fork (non-blocking)
• put (saga dispatch)
• select (saga mapState)
• delay
• cancel
• race && all (like in Promises)
etc.
62. redux-saga: login flow example
function * authorization () {
// Check the storage for cached token and profile
let [token, profile] = yield [
call(auth.getToken),
call(auth.getProfile),
]
// so now user may be logged in...
}
63. redux-saga: login flow example
// ...or may not, so we gonna wait for it
if (!token) {
const {payload: credentials} = yield take(profileActions.SIGN_IN)
const {response, error} = yield call(authRequest, credentials)
if (error) {
yield put(profileActions.signInFailed(error))
continue
}
token = response.token
profile = response.profile
yield [
call(auth.setToken, token),
call(auth.setProfile, profile),
]
}
64. redux-saga: login flow example
// Now when we have token and profile
// We can let user in
yield put(profileActions.signInSuccess({token, profile}))
yield take(profileActions.SIGN_OUT)
token = profile = null
yield [
call(auth.removeToken),
call(auth.removeProfile),
]
yield put(stackActions.clear())
yield put(profileActions.signOutSuccess())
65. redux-saga: login flow example
function * authorization () {
// Check the storage for cached token and profile
let [token, profile] = yield [call(auth.getToken), call(auth.getProfile)]
while (true) {
if (!token) {…} /* Receive token and profile data */
yield put(profileActions.signInSuccess({token, profile}))
yield take(profileActions.SIGN_OUT)
/* Other signOut stuff */
}
}
70. По максимуму используйте PropTypes и DefaultProps
Для клавиатуры используйте KeyboardAvoidingView
Внимательно изучайте документацию
Не пренебрегайте селекторами
Найдите в себе силы разобраться с Redux-Saga - не пожалеете
Не забывайте убивать console.log, когда льете в прод
И конечно же пишите на React Native - он крутой
inline-советы напоследок
