12/08/2018, 17:33

Sử dụng redux có khó không?

Redux là gì ? Redux là một thư viện Javascript giúp tạo ra thành một lớp quản lý trạng thái của ứng dụng. Được dựa trên nền tảng tư tưởng của kiến trúc Flux do Facebook giới thiệu, do vậy Redux thường là bộ đôi kết hợp hoàn hảo với React ( React Js và React Native ). Và đương nhiên ...

Redux là gì ?

Redux là một thư viện Javascript giúp tạo ra thành một lớp quản lý trạng thái của ứng dụng. Được dựa trên nền tảng tư tưởng của kiến trúc Flux do Facebook giới thiệu, do vậy Redux thường là bộ đôi kết hợp hoàn hảo với React ( React Js và React Native ). Và đương nhiên khi nhắc đến reactJs điều đầu tiên ngưới ta nhớ đến đó chính là redux.

Redux có khó không?

Điều may mắn là việc sử dụng Redux js là không quá khó, việc thay đổi trạng thái của ứng dụng, được thực hiện thông qua các hàm thuần tuý. Đưa vào giá trị sự kiện, trạng thái hiện tại và hàm trả về trạng thái tiếp theo. Dù tương lai ứng dụng của bạn có thể rất lớn, nhưng các hàm reducer này thì chỉ cần nhỏ gọn thay đổi trên từng lá của cây trạng thái, và chúng hoàn toàn có thể kết hợp với nhau tạo thành chuỗi sự kiện. Ví dụ: người click vào menu (một sự kiện => thay đổi trạng thái), sau đó router cũng cần thay đổi để phù hợp với ngữ cảnh.

Kết hợp laravel + Reactjs + Redux

Link github: https://github.com/vanquynguyen/redux-crud-API

Chuẩn bị:

Laravel 5.6 (Server APIs)
React-App (Client)
Redux v3.7.2
........

Bắt đầu:

Tạo server cấp phát APIs:

Cài đặt project laravel:

composer create-project --prefer-dist laravel/laravel redux-server

Tạo migration cho table products:

php artisan make:migration create_products_table

Tiếp tục thêm các trường cho table:

     Schema::create('products', function (Blueprint $table) {
        $table->increments('id');
        $table->string('name');
        $table->timestamps();
    });

Tạo model Product cho bảng products:

php artisan make:model Product

Sau khi tạo xong table và model, tiến hành migrate dữ liệu

php artisan migrate

Tạo Resource Controller cho project:

php artisan make:controller Api/ProductController --resource

Thực hiện code chức năng CRUD cho ứng dụng:

    <?php

    namespace AppHttpControllersApi;

    use IlluminateHttpRequest;
    use AppProduct;

    class ProductController extends Controller
    {
        /**
         * Display a listing of the resource.
         *
         * @return IlluminateHttpResponse
         */
        public function index()
        {
            $products = Product::orderBy('created_at', 'desc')->get();

            return response()->json($products);
        }

        /**
         * Show the form for creating a new resource.
         *
         * @return IlluminateHttpResponse
         */
        public function create()
        {
            //
        }

        /**
         * Store a newly created resource in storage.
         *
         * @param  IlluminateHttpRequest  $request
         * @return IlluminateHttpResponse
         */
        public function store(Request $request)
        {
            try {
                $data = $request->all();
                $products = Product::create($data); 

                return response()->json($products);
            } catch (Exception $e) {
                $response['error'] = true;

                return response()->json($response);
            }
        }

        /**
         * Display the specified resource.
         *
         * @param  int  $id
         * @return IlluminateHttpResponse
         */
        public function show($id)
        {
            $products = Product::findOrFail($id);

            return response()->json($products);
        }

        /**
         * Show the form for editing the specified resource.
         *
         * @param  int  $id
         * @return IlluminateHttpResponse
         */
        public function edit($id)
        {
            //
        }

        /**
         * Update the specified resource in storage.
         *
         * @param  IlluminateHttpRequest  $request
         * @param  int  $id
         * @return IlluminateHttpResponse
         */
        public function update(Request $request, $id)
        {
            try {
                $data = $request->all();
                $products = Product::find($id)->update($data);

                return response()->json($products);
            } catch (Exception $e) {
                $response['error'] = true;

                return response()->json($response);
            }
        }

        /**
         * Remove the specified resource from storage.
         *
         * @param  int  $id
         * @return IlluminateHttpResponse
         */
        public function destroy($id)
        {
            try {
                $products = Product::find($id)->delete();

                return response()->json($products);
            } catch (Exception $e) {
                $response['error'] = true;

                return response()->json($response);
            }
        }
    }

Đừng quên khai báo routes nữa nhé:

Route::group(['middleware' => 'api', 'namespace' => 'Api', 'as' => 'api.'], function () {
   Route::resource('products', 'ProductController', ['except' => ['create', 'edit']]);
});

Sau khi tạo thành công Controller + routes, test thử APIs trên Postman: Done! Vậy là chúng ta đã cung cấp đủ APIs cho ứng dụng CRUD của mình.

Tạo client react-app và sử dụng reactjs + redux

Khởi tạo react-app:

npx create-react-app redux-crud-API
cd redux-crud-API
npm start

Cấu trúc thư mục mà mình tham khảo trên trang chủ redux:

 redux-crud-API

 + |- actions
 + |- components
 + |- constants
 + |- page
 + |- reducers
 + |- utils
 + |- App.js
 + |- index.js
 + |- registerServiceWorker.js
 + |- routes.js

Sau đây mình sẽ trình bày chi tiết cách lấy dữ liệu bằng redux một cách đơn giản: (Các chức năng khác các bạn có thể làm theo nhé!) Thiết lập routes:

 import React from 'react';
 import HomePage from './pages/HomePage/HomePage';
 import NotFound from './pages/NotFound/NotFound';
 import ProductListPage from './pages/ProductListPage/ProductListPage';

 const routes = [
     {
         path: '/',
         exact: true,
         main: () => <HomePage />
     },
     {
         path: '/product-list',
         exact: false,
         main: () => <ProductListPage />
     },
     {
         path: ',
         exact: false,
         main: () => <NotFound />
     }
 ];

 export default routes;

Tạo ActionType:

   export const FETCH_PRODUCTS = 'FETCH_PRODUCTS';

Tạo config.js

    export const API_URL = 'http://localhost:8000/api';

Tạo apiCaller.js:

   import axios from 'axios';
   import * as Config from './../constants/Config';

   export default function callApi(endpoint, method = 'GET', body) {
       return axios({
           method,
           url: `${Config.API_URL}/${endpoint}`,
           data: body
       }).catch(err => {
           console.log(err);
       });
   }

Tạo action:

   import * as Types from './../constants/ActionType';
   import callApi from './../utils/apiCaller';

   export const actFetchProductsRequest = () => {
       return (dispatch) => {
           return callApi('products', 'GET', null).then(res => {
               dispatch(actFetchProducts(res.data.data.data));
           });
       }
   }

   export const actFetchProducts = (products) => {
       return {
           type: Types.FETCH_PRODUCTS,
           products
       }
   }

Tạo reducer:

products.js : State sẽ chứa dữ liệu của tất cả products, với đúng ActionType sẽ return đúng dữ liệu của nó từ bên action trả về

   import * as Types from './../constants/ActionType';

   var initialState = [];

   const products = (state = initialState, action) => {
       switch (action.type) {
           case Types.FETCH_PRODUCTS:
               return [...action.products];
           default: return [...state];
       }
   };

   export default products;

Trong file App.js:

    import React, { Component } from 'react';
    import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

    import routes from './routes';
    import Menu from './components/Menu/Menu';

    class App extends Component {
        render() {
            return (
                <Router>
                    <div className="App">
                        <Menu />
                        {this.showContentMenus(routes)}
                    </div>
                </Router>
            );
        }

        showContentMenus = (routes) => {
            var result = null;
            if (routes.length > 0) {
                result = routes.map((route, index) => {
                    return (
                        <Route
                            key={index}
                            path={route.path}
                            exact={route.exact}
                            component={route.main}
                        />
                    );
                });
            }
            return <Switch>{result}</Switch>;
        }

    }

    export default App;

Trong file index.js

    import React from 'react';
    import ReactDOM from 'react-dom';
    import App from './App';
    import registerServiceWorker from './registerServiceWorker';
    import { createStore, applyMiddleware } from 'redux';
    import appReducers from './reducers/index';
    import { Provider } from 'react-redux';
    import thunk from 'redux-thunk';

    const store = createStore(
        appReducers,
        window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(),
        applyMiddleware(thunk)
    );

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

Dùng mapStateToProps để lấy dữ liệu của state, mapDispatchToProps dispatch các action request để đảm bảo rằng request có được thực thi không.

    import React, { Component } from 'react';
    import './ProductListPage.css';
    import { Link } from 'react-router-dom';

    import { connect } from 'react-redux';
    import ProductList from './../../components/ProductList/ProductList';
    import ProductItem from './../../components/ProductItem/ProductItem';
    import { actFetchProductsRequest, actDeleteProductRequest, searchProductRequest } from '../../actions/index';

    class ProductListPage extends Component {

        componentDidMount() {
            // Gọi trước khi component đc render lần đầu tiên
            this.props.fetchAllProducts();
        }

        render() {

            var { products } = this.props;

            return (
                <div className="container">
                    <div className="row">
                        <div className="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                            <Link to="/product/add" className="btn btn-primary mb-5">
                                <i className="glyphicon glyphicon-plus"></i> Thêm Sản Phẩm
                            </Link>
                            <ProductList>
                                {this.showProducts(products)}
                            </ProductList>
                        </div>
                    </div>
                </div>
            );
        }

        showProducts(products) {
            var result = null;
            var { onDeleteProduct } = this.props;
            if (products.length > 0) {
                result = products.map((product, index) => {
                    return <ProductItem product={product} key={index} index={index} onDeleteProduct={onDeleteProduct} />
                });
            }
            return result;
        }

    }

    const mapStateToProps = state => {
        return {
            products: state.products
        }
    }

    const mapDispatchToProps = (dispatch, props) => {
        return {
            fetchAllProducts: () => {
                dispatch(actFetchProductsRequest());
            }
        }
    }

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

Vậy là các bạn đã biết cách lấy dữ liệu sử dụng redux rồi đúng không! Tham khảo thêm link github của minh để hiểu rõ hơn cấu trúc nhé.

Kết luận

Redux không hề khó, hãy cố gắng nắm thật chắc các kiến thức về reactjs trước khi tìm hiểu về redux. Hãy tự xây dựng cho mình một cấu trúc phù hợp và thoải mái nhất khi sử dụng redux.

Tham Khảo:

Github: https://github.com/vanquynguyen/redux-crud-API
Trang chủ reactJs: https://reactjs.org/
Trang chủ redux: https://redux.js.org/

Bình luận về bài viết này

Bùi Văn Nam

27 chủ đề

7090 bài viết

Sử dụng redux có khó không?

Redux là gì ?

Redux có khó không?

Kết hợp laravel + Reactjs + Redux

Kết luận

Đăng ký nhận thông báo

HỖ TRỢ HỌC VIÊN

VỀ CODE24H

HỢP TÁC VÀ LIÊN KẾT

KẾT NỐI VỚI CHÚNG TÔI

TẢI ỨNG DỤNG TRÊN ĐIỆN THOẠI