React'ive Saturday – React + Redux + Selectors

Kristina Gusiatina, JS Developer, eKreative

Як багато з нас знають, що ми можемо користуватися селекторами не тільки в css? Розглянемо селектори, а також навіщо вони потрібні у ReactJS.

https://github.com/kina4smile/reselect-app-example

Transcript

1. React + Redux + Selectors
2. •componentWillMount() - срабатывает до того как компонент отрендерился; •componentDidMount() - срабатывает после того как компонент отренедерился; •componentWillReceaiveProps() - срабатывает именно тогда когда компонент получает обновленные пропсы; •componentWillUnmount() - срабатывает перед тем как компонент будет уадлен из Дома; •componentDidUpdate - срабатывает тогда когда компонент уже получил новые пропсы;
3. Posts SelectedPosts
4. SelectedPosts Posts
5. Posts SelectedPosts Stat e • Posts • SelectedPosts SelectedPostsContain er PostsContainer Container s Component s
6. Posts SelectedPosts Stat e • Posts • SelectedPosts Component s Container s PostsContainer SelectedPostsContain er Posts SelectedPost s PostsContain er SelectedPos tsContainer Action s
7. Stat e • Posts • SelectedPosts Component s Container s Posts SelectedPost s PostsContain er SelectedPos tsContainer Action s <input type=“checkbox” /> ComponentWillReceiv e Props() ComponentWillReceiv e Props()
8. Селекторы – это геттеры для redux стейта. Как геттеры, они инкапсулируют структуру стейта и могут пере использоваться. const mapStateToProps = (state, ownProps) => { usersNumber: state.users.length } Это функции которые принимают Redux стейт и аргументы и возвращают данные, которые передаются в компонент
9. import {getUsersNumber} from ‘./selectors.js’ const mapStateToProps = (state, ownProps) => { usersNumber: getUsersNumber(state.users) } const getUsersNumber = ({ users }) => users.length;
10. Селекторы также используются для вычисления производных данных const getUsersIds = ({users}) => users.map(({ id }) => id); const getUser = ({users, itemId}) => users.find((user) => user.id === itemId);
11. • Мы можем воспринимать Redux как своеобразную базу данных, селекторы удобны чтоб вытянуть из нее какую-либо информацию; •Селекторы могут запоминаться; •Вся логика по выборке из стейта хранится в одном месте; •Селекторы реюзабельны;
12. export const allPosts = state => state.posts.all export const selectedPostsIds = state => state.selectedPosts export const selectedPosts = state => { let selectedPosts = [] state.selectedPosts.forEach(id => { let post = state.posts.all.find(post => post.id === id) if (post) { selectedPosts.push(post) } }) return selectedPosts }
13. import { createSelector } from 'reselect' export const selectedPosts = createSelector( allPosts, selectedPostsIds, (allPosts, selectedPostsIds) => { let selectedPosts = [] selectedPostsIds.forEach(id => { let post = allPosts.find(post => post.id === id) if (post) selectedPosts.push(post) }) return selectedPosts }) export const allPosts = state => state.posts.all export const selectedPostsIds = state => state.selectedPosts
14. State • Posts • SelectedPosts Components Containers PostsContain er SelectedPos tsContainer Action <input type=“checkbox” /> Posts ComponentWillReceiv e Props() SelectedPost s ComponentWillReceiv e Props() Posts ComponentWill ReceiveProps() SelectedPos ts ComponentWill ReceiveProps() Selectors Selectors if selector changed
15. Lets see a real code
16. https://github.com/kina4smile/reselect -app-example