Pulse Of The Blogosphere » Demo-Count: 5. use Redux

HOME / Javascript / ReactJS old / Demo-Count: 5. use Redux

Demo-Count: 5. use Redux

Author: admin - Posted: 28/06/21 - Update: 28/06/21

<!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>Demo app Count with use ReactJS and Redux</title>
</head>

<body>
    <div id="root"></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 src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.1.0/redux.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/7.2.4/react-redux.js"></script>

    <!-- =========== reducers/count_reducer.js =========== -->
    <script>
        //1.1. Khai báo state
        const initialCount = { amount: 1 }
        //1.2. Khai báo Reducer
        const countReducer = (state = initialCount, action) => {
            let newState = { ...state }
            switch (action.type) {
                case 'INCREMENT': {
                    newState.amount += action.payload.amount
                    return newState
                }
                case 'DECREMENT': {
                    newState.amount -= action.payload.amount
                    return newState
                }
                default: return state;
            }
        }
    </script>

    <!-- =========== actions/count_actions.js =========== -->
    <script>
        //2. Khai báo các action (khi được dispatch ==> sẽ trả về object actions tương ứng)
        const action_increment = (payload) => ({
            type: 'INCREMENT',
            payload: payload,
        })
        const action_decrement = (payload) => ({
            type: 'DECREMENT',
            payload: payload,
        })
    </script>

    <!-- =========== reducers/index.js =========== -->
    <script>
        //3.1. Khai báo rootReducer: Combine nhiều Reducers lại để tạo ra 1 Reducer duy nhất
        let rootReducer = Redux.combineReducers({
            count: countReducer,
        });
    </script>

    <!-- =========== src/store.js =========== -->
    <script type="text/babel">
        //3.2. Khai báo store (chứa rootReducer), cái đoạn lằng nhằng là để sử dụng cho redux chrome extensions
        const store = Redux.createStore(
            rootReducer /* preloadedState, */,
            window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
        );
    </script>

    <!-- =========== components/App.js =========== -->
    <script type="text/babel">
        function App(props) {
            //Dùng useSelector và useDispatch để lấy dữ liệu từ Redux
            const count = ReactRedux.useSelector(state => state.count);
            const dispatch = ReactRedux.useDispatch();
            return (
                <div>
                    <p>{count.amount}</p>
                    <button onClick={() => { dispatch(action_increment({ amount: 1 })) }}>Increase</button>
                    <button onClick={() => { dispatch(action_decrement({ amount: 1 })) }}>Decrease</button>
                </div>
            )
        }
    </script>

    <!-- =========== src/index.js =========== -->
    <script type="text/babel">
        //Connect React và Redux bằng Provider, với store=store đã được khai báo ở trên
        const Provider = ReactRedux.Provider;
        ReactDOM.render(
            <Provider store={store}>
                <App />
            </Provider>,
            document.getElementById('root')
        );
    </script>
</body>

</html>

<!DOCTYPE html>

<head>

<title>Demo app Count with use ReactJS and Redux</title>

</head>

<body>

//1.1. Khai báo state

const initialCount = { amount: 1 }

//1.2. Khai báo Reducer

const countReducer = (state = initialCount, action) => {

let newState = { ...state }

switch (action.type) {

case 'INCREMENT': {

newState.amount += action.payload.amount

return newState

}

case 'DECREMENT': {

newState.amount -= action.payload.amount

return newState

}

default: return state;

}

</script>

//2. Khai báo các action (khi được dispatch ==> sẽ trả về object actions tương ứng)

const action_increment = (payload) => ({

type: 'INCREMENT',

payload: payload,

})

const action_decrement = (payload) => ({

type: 'DECREMENT',

payload: payload,

})

</script>

//3.1. Khai báo rootReducer: Combine nhiều Reducers lại để tạo ra 1 Reducer duy nhất

let rootReducer = Redux.combineReducers({

count: countReducer,

});

</script>

//3.2. Khai báo store (chứa rootReducer), cái đoạn lằng nhằng là để sử dụng cho redux chrome extensions

const store = Redux.createStore(

rootReducer /* preloadedState, */,

window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()

);

</script>

function App(props) {

//Dùng useSelector và useDispatch để lấy dữ liệu từ Redux

const count = ReactRedux.useSelector(state => state.count);

const dispatch = ReactRedux.useDispatch();

return (

<div>

<p>{count.amount}</p>

<button onClick={() => { dispatch(action_increment({ amount: 1 })) }}>Increase</button>

<button onClick={() => { dispatch(action_decrement({ amount: 1 })) }}>Decrease</button>

</div>

)

}

</script>

//Connect React và Redux bằng Provider, với store=store đã được khai báo ở trên

const Provider = ReactRedux.Provider;

ReactDOM.render(

<App />

</Provider>,

document.getElementById('root')

);

</script>

</body>

</html>

ReactJS old

Demo-Count: 4. use Redux without React