前端笔记之react之redux

//store.js
import { createStore } from 'redux'
import { reducer } from './reducer'
//存储空间，必须是唯一
export const store = createStore(reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__())
//reducer.js
import { ADD, REDUCE } from './action'
//纯函数，只承担计算 State 的功能，不合适承担其他功能，也承担不了，因为理论上，纯函数不能进行读写操作
const defaultState = {
  username: "null",
  password: "null"
}
export const reducer = (state = defaultState, action) => {

  if (action.type === ADD) {
    let newstate = JSON.parse(JSON.stringify(state))

    newstate.username = action.value.username
    newstate.password = action.value.password
    newstate.userID = 5

    return newstate
  }
  if (action.type === REDUCE) {
    let newstate = JSON.parse(JSON.stringify(state))

    newstate.username = action.value.username
    newstate.password = action.value.password
    newstate.userID = 6

    return newstate
  }
  return state
}
action.jsexport const ADD = 'add'
export const REDUCE = 'reduce'

//actionCreactor.js
import { ADD, REDUCE } from './action'
export const ADD_ACTION = (value) => ({
  type: ADD,
  value
})
export const REDUCE_ACTION = (value) => ({
  type: REDUCE,
  value
})
//Action：存放数据的对象，即消息的载体，只能被别人操作，自己不能进行任何操作。
//index.js
//action 是一个动作和当前状态值
    // export const ADD_ACTION = (value) => ({
    //   type: ADD,
    //   value
    // })
    const action = ADD_ACTION(data)
    store.dispatch(action)

    store.subscribe(this.listerner)