Pulse Of The Blogosphere » ReactJS

HOME / Javascript / ReactJS old / ReactJS – 3. useReducer

ReactJS – 3. useReducer

Author: admin - Posted: 01/05/21 - Update: 20/05/22

- Sử dụng khi một component có rất nhiều state.
- Các state này nếu cùng thay đổi trạng thái vào 1 thời điểm thì chỉ cần 1 lần render duy nhất
- Mô hình này quản lý giống hệt Redux

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ReactJS</title>
</head>

<body>
    <div id="app"></div>
    <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

    <script type="text/babel">
        const { useReducer } = React;

        //1. Khai báo state
        const initialState = { now: 0, loading: false }
        //2. Khai báo Reducer
        const nowReducer = (state = initialState, action) => {
            switch (action.type) {
                case 'FETCH_INIT': {
                    return {
                        ...state,
                        loading: true,
                        now: 'Loading...',
                    }
                }
                case 'FETCH_SUCCESS': {
                    return {
                        ...state,
                        loading: false,
                        now: action.payload,
                    }
                }
                case 'FETCH_FAILURE': {
                    return {
                        ...state,
                        loading: false,
                        now: "Error !!!",
                    }
                }
                default: return state;
            }
        }

        //3. Khai báo action
        const action_init = () => ({
            type: 'FETCH_INIT',
        })
        const action_success = (now) => ({
            type: 'FETCH_SUCCESS',
            payload: now,
        })
        const action_failure = (now) => ({
            type: 'FETCH_FAILURE',
            payload: now,
        })

        //4. Sử dụng tại Componet => dùng useReducer để lấy state, và dùng dispatch để action
        function App(props) {
            const [state, dispatch] = useReducer(nowReducer, initialState)

            const fakePromise = () => new Promise((resolve, reject) => {
                setTimeout(() => {
                    let now = (new Date()).getTime();
                    if (now % 2) resolve(now);
                    else reject(now);
                }, 500);
            })

            const getTime = () => {
                dispatch(action_init())
                fakePromise()
                    .then(res => dispatch(action_success(res)))
                    .catch(err => dispatch(action_failure(err)))
            }

            return (
                <div>
                    <p>{state.now}{state.loading && <img src="https://vcdn-ione.vnecdn.net/2016/07/13/loading-256-0001-4566-1468383063.gif" width="12px" />}</p>
                    <button onClick={getTime}>Get Time</button>
                </div>
            )
        }

        ReactDOM.render(
            <App />,
            document.getElementById('app')
        );
    </script>
</body>

</html>

<!DOCTYPE html>

<head>

<title>ReactJS</title>

</head>

<body>

const { useReducer } = React;

//1. Khai báo state

const initialState = { now: 0, loading: false }

//2. Khai báo Reducer

const nowReducer = (state = initialState, action) => {

switch (action.type) {

case 'FETCH_INIT': {

return {

...state,

loading: true,

now: 'Loading...',

}

case 'FETCH_SUCCESS': {

return {

...state,

loading: false,

now: action.payload,

}

case 'FETCH_FAILURE': {

return {

...state,

loading: false,

now: "Error !!!",

}

default: return state;

}

//3. Khai báo action

const action_init = () => ({

type: 'FETCH_INIT',

})

const action_success = (now) => ({

type: 'FETCH_SUCCESS',

payload: now,

})

const action_failure = (now) => ({

type: 'FETCH_FAILURE',

payload: now,

})

//4. Sử dụng tại Componet => dùng useReducer để lấy state, và dùng dispatch để action

function App(props) {

const [state, dispatch] = useReducer(nowReducer, initialState)

const fakePromise = () => new Promise((resolve, reject) => {

setTimeout(() => {

let now = (new Date()).getTime();

if (now % 2) resolve(now);

else reject(now);

}, 500);

})

const getTime = () => {

dispatch(action_init())

fakePromise()

.then(res => dispatch(action_success(res)))

.catch(err => dispatch(action_failure(err)))

}

return (

<div>

<p>{state.now}{state.loading && <img src="https://vcdn-ione.vnecdn.net/2016/07/13/loading-256-0001-4566-1468383063.gif" width="12px" />}</p>

</div>

)

}

ReactDOM.render(

<App />,

document.getElementById('app')

);

</script>

</body>

</html>

ReactJS old

ReactJS – 1. Hook và Class