Vài nét về ví dụ sử dụng action trong redux

redux sử dụng kết hợp với toán tử 3 chấm

sơ đồ hoạt động

import './App.css';

import React, {Component} from 'react';

var a1 = [1, 2, 3, 4];
var a2 = [...a1];
console.log(a1);
a2[0] = 100;
console.log(a1);
console.log(a2);
var b1 = {
    num: [1, 2, 3],
    status: true}
var b2 = {...b1, status: false};
console.log(b2);
var b3 = {...b1, num: [...b1.num, 100]};
b3.num[3] = 100;
console.log(b3)

class App extends Component {
    render() {
        var redux = require('redux');
        var oldState = {
            num: ["manhinh", "chuot", "ban phim"],
            editStatus: true        }

        var reducer1 = (state = oldState, action) => {
            switch (action.type) {
                case "CHANGE_EDIT_STATUS":    

                   return {...state, editStatus: !state.editStatus}
                case "ADD_NEW":        

                   return {...state, num: [...state.num, action.newItem]}
                case "DELETE":                  

                   return {...state,num:state.num.filter((value,i)=> i !== action.number)}
                default:                   

                   return state;
            }
        }
        var store1 = redux.createStore(reducer1);
        // Thực thi chỉ thị action 

          store1.dispatch({type: "CHANGE_EDIT_STATUS"});
        // Thực thi chỉ thị action và truyền tham số         

                   store1.dispatch({type: "ADD_NEW", newItem: "Tai nghe"});
        // Thực thi chỉ thị action XOA     

          store1.dispatch({type: "DELETE", number: 0});
        console.log(store1.getState())
        return (
            <div className="App">
            </div>
        );
    }
}

export default App;