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

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

Demo-Count: 6. use Redux-Toolkit

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

4. Demo app Count with use ReactJS, Redux and Redux-Toolkit

<!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>

    <script src="https://cdn.jsdelivr.net/npm/@reduxjs/toolkit@1.6.0/dist/redux-toolkit.umd.min.js"></script>

    <!-- =========== slices/count_slice.js =========== -->
    <script>
        //1. Khai báo Slice: Dùng RTK.createSlice khai báo tất cả State, Reducers và Actions luôn
        const countSlice = RTK.createSlice({
            name: 'count',
            initialState: { amount: 1 },
            reducers: {
                action_increment(state, action) {
                    state.amount += action.payload.amount;
                },
                action_decrement(state, action) {
                    state.amount -= action.payload.amount;
                },
            }
        });
        // Export ra các actions, reducer tương ứng :D
        const { action_increment, action_decrement } = countSlice.actions;
        const countReducer = countSlice.reducer;
    </script>

    <!-- =========== src/store.js =========== -->
    <script type="text/babel">
        //2. Khai báo store: tất cả các Reducer trong store ở dưới đây
        const store = RTK.configureStore({
            reducer: {
                count: countReducer
            }
        })
    </script>

    <!-- =========== components/App.js =========== -->
    <script type="text/babel">
        //3. Sử dụng store: Dùng useSelector và useDispatch để lấy dữ liệu từ Redux
        function App(props) {

            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">
        //4. Connect Store của Redux bằng Provider;
        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. Khai báo Slice: Dùng RTK.createSlice khai báo tất cả State, Reducers và Actions luôn

const countSlice = RTK.createSlice({

name: 'count',

initialState: { amount: 1 },

reducers: {

action_increment(state, action) {

state.amount += action.payload.amount;

action_decrement(state, action) {

state.amount -= action.payload.amount;

}

});

// Export ra các actions, reducer tương ứng :D

const { action_increment, action_decrement } = countSlice.actions;

const countReducer = countSlice.reducer;

</script>

//2. Khai báo store: tất cả các Reducer trong store ở dưới đây

const store = RTK.configureStore({

reducer: {

count: countReducer

}

})

</script>

//3. Sử dụng store: Dùng useSelector và useDispatch để lấy dữ liệu từ Redux

function App(props) {

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>

//4. Connect Store của Redux bằng Provider;

const Provider = ReactRedux.Provider;

ReactDOM.render(

<App />

</Provider>,

document.getElementById('root')

);

</script>

</body>

</html>

4. Demo app Count with use ReactJS, Redux and Redux-Toolkit

ReactJS old

ReactJS – 2: Props và State