Content Comparison

Bài sau sẽ đi vào thực hành để hiểu rõ hơn luồng hoạt động của redux. Ở đây sẽ cung cấp source code, nhiệm vụ là hiểu và có thể làm được task tương tự ở các bài sau sẽ cần vận dụng.

Tài liệu¶

• https://drive.google.com/file/d/1_b_giq54-wbc9CU9h8I5N0OlYPwProah/view?usp=sharing

Cài đặt source code.

Giải thích:

...

• Action:

...

Image Added

Source code trên đơn giản chỉ làm nhiệm vụ đếm số sau mỗi lần click sử dụng redux.

Ở đây, ta xác định action được tạo ra là action add, do đó, ta cần khai báo action

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

export function add() {
    return {
        type: types.ADD
    };
}

Mô tả hành động .

...

Tiếp theo, ta cần tạo một reducer, để thực hiện nhiệm vụ chuyển đổi state sau khi nhận được action add phát ra

Ta sẽ có countReducer, có nhiệm vụ biến đổi state sau khi nhận được action add:

import {ADD} from '../constants/ActionTypes';

// initialState
const initialState = {
    'count': 0
}

export default function countReducer(state = initialState, action) {
    switch (action.type) {
        case ADD:
            return {
                ...state,
                'count' : state.count + 1
            }
        default:
            return state;
    }
}

Combine reducer vào root reducer:

...

reducer, muc đích để có thể apply được nhiều reducer sau này khi phát triển thêm.

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

const rootReducer = combineReducers({
    countReducer
});

export default rootReducer;

Khởi tạo store:

...

, truyền 2 tham số là state khởi tạo và rootReducer, gồm các reducer được combine, ở đây ta chỉ có 1 reducer là countReducer

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import * as serviceWorker from './serviceWorker';
import {Provider} from "react-redux";
import { createStore, applyMiddleware } from 'redux';
import { createLogger } from 'redux-logger';
import CountExample from './components/CountExample';
import rootReducer from './reducers/rootReducer';

// initialState
const initialState = {}

// Create store
const store = createStore(
    rootReducer,
    initialState,
   
applyMiddleware(
        createLogger()
    )
);

ReactDOM.render(
    <Provider store={store}>
        <div>
            <CountExample />
        </div>
    </Provider>,
  document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

Trong componetcomponent, map state của redux với props, map dispatch của redux với action props:

import React, { Fragment, Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import * as CountActions from '../actions/CountActions';

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

        return (
            <Fragment>
                <div>
                    <button onClick={actions.add}>Increase</button>
                </div>
                <div>
                    {
                        count
                    }
                </div>
            </Fragment>
        );
    }
}

function mapStateToProps(state) {
    return {
        count: state.countReducer.count
    };
}

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

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

Chú ý mapStateToProps và mapDispatchToProps

map state với props, map state count trong store ứng với props count của count component

map dispatch với props, để khi gọi this.props.actions.add ta sẽ kích hoạt action add của redux.

Khi onclick, sẽ kích hoạt this.props.add => qua mapDispatchToProps, sẽ dispatch action add.

Action add được đưa vào reducer, xử lý tăng state lên 1 đơn vị

State cập nhật qua mapStateToProps, sẽ trả vào CountExample component, cập nhật props và hiển thị ra màn hình