"scripts": {
  "start": "node src/index.js"
}

// 由于測試項(xiàng)目在node環(huán)境下, 因此使用require方式導(dǎo)入
const { createStore } = require("redux")

// 創(chuàng)建的要存儲(chǔ)的state: initialState
const initialState = {
  name: "chenyq",
  age: 18
}

// 定義reducer, 將要存儲(chǔ)的state作為返回值返回
function reducer() {
  return initialState
}

// 創(chuàng)建的store, 內(nèi)部會(huì)自動(dòng)回調(diào)reducer, 拿到initialState
const store = createStore(reducer)

// 導(dǎo)出store
module.exports = store

// 導(dǎo)入創(chuàng)建的store
const store = require("./store")

// 獲取store中的state
console.log(store.getState())

store.getState().name = "abc"

// 定義一個(gè)action
const nameAction = { type: "change_name", name: "abc" }
// 派發(fā)action
store.dispatch(nameAction)

// 派發(fā)action
store.dispatch({ type: "change_name", name: "abc" })

// 第一次state是undefined, 因此給一個(gè)默認(rèn)值將初始化數(shù)據(jù)添加到store中
function reducer(state = initialState, action) {

  // 有數(shù)據(jù)更新時(shí), 返回一個(gè)新的state
  if (action.type === "change_name") {
    return { ...state, name: action.name }
  }

  // 沒有數(shù)據(jù)更新時(shí), 返回之前的state
  return state
}

const store = require("./store")

// 例如: 監(jiān)聽數(shù)據(jù)的變化, 當(dāng)store變化, 就獲取最新的state
store.subscribe(() => {
  console.log(store.getState())
})

store.dispatch({ type: "change_name", name: "abc" })
store.dispatch({ type: "change_name", name: "aaa" })

// 創(chuàng)建修改name的action
const changeNameAction = (name) => ({
  type: "change_name",
  name
})
// 創(chuàng)建修改age的action
const changeAgeAction = (num) => ({
  type: "change_age",
  num
})

// 在派發(fā)action時(shí), 我們就可以調(diào)用函數(shù)即可獲取action
store.dispatch(changeNameAction("aaa"))
store.dispatch(changeNameAction("bbb"))
store.dispatch(changeNameAction("ccc"))

store.dispatch(changeAgeAction(10))
store.dispatch(changeAgeAction(20))
store.dispatch(changeAgeAction(30))
store.dispatch(changeAgeAction(40))

const { createStore } = require("redux")
// 引入reducer
const reducer = require("./reducer")

// 創(chuàng)建的store, 內(nèi)部會(huì)自動(dòng)回調(diào)reducer, 拿到initialState
const store = createStore(reducer)

// 導(dǎo)出store
module.exports = store

const { CHANGE_NAME, CHANGE_AGE } = require("./constants")

// 創(chuàng)建的要存儲(chǔ)的初始化state
const initialState = {
  name: "chenyq",
  age: 18
}

// 定義reducer, 將要存儲(chǔ)的state作為返回值返回
// 第一次state是undefined, 因此給一個(gè)默認(rèn)值將初始化數(shù)據(jù)添加到store中
function reducer(state = initialState, action) {
  switch(action.type) {
    case CHANGE_NAME: 
      return { ...state, name: action.name }
    case CHANGE_AGE: 
      return {...state, age: state.age + action.num}
  }

  // 沒有數(shù)據(jù)更新時(shí), 返回之前的state
  return state
}

module.exports = reducer

// store/constants.js

const CHANGE_NAME = "change_name"
const CHANGE_AGE = "change_age"

module.exports = {
   CHANGE_NAME,
   CHANGE_AGE
}

const { CHANGE_NAME, CHANGE_AGE } = require("./store/constants")

// 創(chuàng)建修改name的action
const changeNameAction = (name) => ({
  type: CHANGE_NAME,
  name
})
// 創(chuàng)建修改age的action
const changeAgeAction = (num) => ({
  type: CHANGE_AGE,
  num
})

module.exports = {
  changeNameAction,
  changeAgeAction
}