redux.js

// จะทำอะไร?

// 1. ชื่อ "การกระทำ" (Action Name)
ADD_TODO = 'ADD_TODO'

// 2. ข้อมูลทั้งหมดของแอพ (State)
state = {todos: ['เลือกตั้ง']}

// 3. การกระทำ (Action)
action = {type: ADD_TODO, payload: 'เตะประยุทธ์'}

// เปลี่ยนแปลงข้อมูล
;['ทักแชท', ...state.todos]

// 4. Reducer: ฟังก์ชั่นที่ รับการกระทำเข้าไป (Action) => ส่งข้อมูลใหม่ออกมา (State)
function todoReducer(state, action) {
  if (action.type === ADD_TODO) {
    return {
      ...state,
      todos: [...state.todos, action.payload]
    }
  }

  return state
}

todoReducer(state, action)

todoReducer({todos: []}, {type: 'ADD_TODO', payload: 'กินหนม'})

// 5. ฟังก์ชั่นสร้างการกระทำ "Action Creator"
function addTodo(todo) {
  return {type: ADD_TODO, payload: todo}
}

addTodo('กินขนม')

todoReducer(state, addTodo('กินขนม'))