Content Comparison

Mở đầu¶

Tiếp nối bài viết về Redux cho người mới bắt đầu, trong bài viết này chúng ta sẽ cùng nhau thực hiện một Todo app để tìm hiểu cách sử dụng redux trong một project thực tế.

Trước khi bắt đầu cùng nhìn lại 1 lần các nhân vật ở bài trước :

...

Setup¶

Trong bài viết này mình sẽ sử dụng React + Redux. Chúng ta có thể tạo nhanh một react app thông qua create-react-app:

...

react-redux : chính là The view layer binding trong bài trước, làm nhiệm vụ kết nối cho redux và react.

Let's go¶

Cấu trúc thư mục¶

Ở phần trước chúng ta đã biết một app sử dụng Redux có 4 thành phần cơ bản action reducer store và view. Trong đó store chúng ta chỉ việc khởi tạo trong root component còn việc quản lý Redux sẽ lo. view thì bao gồm smart components (containers) những components giao tiếp với Redux và dumb components (components) những components không giao tiếp với Redux. Các action type của dụng thường là các hằng số được định nghĩa trước.

Do đó để tiện việc quản lý chúng ta có thể tạo ra các thư mục actions constants reducers containers components, app của chúng ta sẽ có cấu trúc như sau:

...

Actions¶

Đầu tiên chúng ta sẽ tạo ra các actions, các bạn còn nhớ The Action creators không, anh ta tạo ra những action là formated object chứa type và thông tin của action đó. Type thường sẽ là một hằng số được định nghĩa trước.

...

import * as types from '../constants/ActionTypes';

export function addTodo(text) {
    return {
        type: types.ADD_TODO,
        text
    };
}

export function deleteTodo(id) {
    return {
        type: types.DELETE_TODO,
        id
    };
}

export function editTodo(id, text) {
    return {
        type: types.EDIT_TODO,
        id,
        text
    };
}

export function markTodo(id) {
    return {
        type: types.MARK_TODO,
        id
    };
}

export function markAll() {
    return {
        type: types.MARK_ALL
    };
}

export function clearMarked() {
    return {
        type: types.CLEAR_MARKED
    };
}

Reducers¶

Tiếp theo là các reducers, chúng ta tạo ra các sub-reducers và một root-reducer quản lý chung. Reducers là các pure function hoạt động theo nguyên lý :

...

import { combineReducers } from 'redux';
import todosReducers from './todosReducers';

const rootReducer = combineReducers({
    todosReducers
});

export default rootReducer;

Views¶

Smart Component (containers)¶

Containers là những component giao tiếp với Redux thông qua connect() của react-redux.

...

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import Header from '../components/Header';
import MainSection from '../components/MainSection';
import * as TodoActions from '../actions/TodoActions';

class TodoApp extends Component {
    render() {
        const { todos, actions } = this.props;

        return (
            <div>
                <Header addTodo={actions.addTodo} />
                <MainSection todos={todos} actions={actions} />
            </div>
        );
    }
}

function mapStateToProps(state) {
    return {
        todos: state.todosReducers
    };
}

function mapDispatchToProps(dispatch) {
    return {
        actions: bindActionCreators(TodoActions, dispatch)
    };
}

export default connect(mapStateToProps, mapDispatchToProps)(TodoApp);

Dump Components¶

Là những component thông thường, chúng không giao tiếp với Redux, chỉ nhận giá trị và thao tác thông qua props.

...

Trong app của chúng ta chúng là Header, MainSection .....

Root component¶

Trong mọi React-app đều có root component, ở app sử dụng Redux root component đảm nhận thêm việc khởi tạo store và bao các component lại với Provider của react-redux giúp component có thể giao tiếp với redux.

...

Redux còn rất nhiều khái niệm khác như Async Middleware... các bạn có thể tìm hiểu thêm ở trang chủ của Redux.

Tài liệu¶

• Source code