import { createStore } from 'redux'
/**
 * 這是一個 reducer 函數：接受當前 state 值和描述“發生了什么”的 action 對象，它返回一個新的 state 值。
 * reducer 函數簽名是 : (state, action) => newState
 *
 * Redux state 應該只包含普通的 JS 對象、數組和原語。
 * 根狀態值通常是一個對象。 重要的是，不應該改變 state 對象，而是在 state 發生變化時返回一個新對象。
 *
 * 你可以在 reducer 中使用任何條件邏輯。 在這個例子中，我們使用了 switch 語句，但這不是必需的。
 * 
 */
function counterReducer(state = { value: 0 }, action) {
  switch (action.type) {
    case 'counter/incremented':
      return { value: state.value + 1 }
    case 'counter/decremented':
      return { value: state.value - 1 }
    default:
      return state
  }
}
// 創建一個包含應用程序 state 的 Redux store。
// 它的 API 有 { subscribe, dispatch, getState }.
let store = createStore(counterReducer)
// 你可以使用 subscribe() 來更新 UI 以響應 state 的更改。
// 通常你會使用視圖綁定庫（例如 React Redux）而不是直接使用 subscribe()。
// 可能還有其他用例對 subscribe 也有幫助。
store.subscribe(() => console.log(store.getState()))
// 改變內部狀態的唯一方法是 dispatch 一個 action。
// 這些 action 可以被序列化、記錄或存儲，然后再重放。
store.dispatch({ type: 'counter/incremented' })
// {value: 1}
store.dispatch({ type: 'counter/incremented' })
// {value: 2}
store.dispatch({ type: 'counter/decremented' })
// {value: 1}

import { createSlice, configureStore } from '@reduxjs/toolkit'
const counterSlice = createSlice({
  name: 'counter',
  initialState: {
    value: 0
  },
  reducers: {
    incremented: state => {
      // Redux Toolkit 允許在 reducers 中編寫 "mutating" 邏輯。
      // 它實際上并沒有改變 state，因為使用的是 Immer 庫，檢測到“草稿 state”的變化并產生一個全新的
      // 基于這些更改的不可變的 state。
      state.value += 1
    },
    decremented: state => {
      state.value -= 1
    }
  }
})
export const { incremented, decremented } = counterSlice.actions
const store = configureStore({
  reducer: counterSlice.reducer
})
// 可以訂閱 store
store.subscribe(() => console.log(store.getState()))
// 將我們所創建的 action 對象傳遞給 `dispatch`
store.dispatch(incremented())
// {value: 1}
store.dispatch(incremented())
// {value: 2}
store.dispatch(decremented())
// {value: 1}

import { configureStore } from '@reduxjs/toolkit'
export default configureStore({
  reducer: {}
})

import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import App from './App'
import store from './app/store'
import { Provider } from 'react-redux'
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)

features/counter/counterSlice.js
import { createSlice } from '@reduxjs/toolkit'
export const counterSlice = createSlice({
  name: 'counter',
  initialState: {
    value: 0
  },
  reducers: {
    increment: state => {
      // Redux Toolkit 允許我們在 reducers 寫 "可變" 邏輯。它
      // 并不是真正的改變狀態值，因為它使用了 Immer 庫
      // 可以檢測到“草稿狀態“ 的變化并且基于這些變化生產全新的
      // 不可變的狀態
      state.value += 1
    },
    decrement: state => {
      state.value -= 1
    },
    incrementByAmount: (state, action) => {
      state.value += action.payload
    }
  }
})
// 每個 case reducer 函數會生成對應的 Action creators
export const { increment, decrement, incrementByAmount } = counterSlice.actions
export default counterSlice.reducer

import { configureStore } from '@reduxjs/toolkit'
import counterReducer from '../features/counter/counterSlice'
export default configureStore({
  reducer: {
    counter: counterReducer
  }
})

import React from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { decrement, increment } from './counterSlice'
import styles from './Counter.module.css'
export function Counter() {
  const count = useSelector(state => state.counter.value)
  const dispatch = useDispatch()
  return (
    <div>
      <div>
        <button
          aria-label="Increment value"
          onClick={() => dispatch(increment())}
        >
          Increment
        </button>
        <span>{count}</span>
        <button
          aria-label="Decrement value"
          onClick={() => dispatch(decrement())}
        >
          Decrement
        </button>
      </div>
    </div>
  )
}