redux 状态管理

安装

npm i --save redux

配置状态

新建 reducer.js 状态管理文件

// state  
const state = {
    // 存储公共状态数据
},
export default (state,action)=>{
    return state
}

新建 store/index.js 文件 状态管理工具

// 生成状态管理模块
import {createStore} from 'redux'
import reducer from './reducer.js '
const store = createStore(reducer)
// 导出
export default store

在组件中使用

// 导入 store
import store from './store/index.js'
// 获取全部状态
store.getState()

修改状态

// 在事件处理程序中建立action
const action = {
    type:'自定义名字',
  value:新的值
}
// 传递action
store.dispatch(action)

reducer.js 文件 接收action

// reducer 只能接收action 不能改变state
export default (state,action)=>{
  // state 状态值
  // action 接收的action 
  if(action.type==='名字'){
      // 改变state的方法
    let newState = JSON.parse(JSON.stringfy(state))
    newState.XXX = action.value
    // 重新传递state为newstate
    return newState
  }
    return state
}

在中间中订阅状态

// 生命周期钩子函数
constructor(){
    store.subscribe(this.storeChange)
}
// 订阅方法
const storeChange ()=>{
    this.setState(store.geState())
}

代码优化

新建 action.js 文件 统一存储type 消除魔法字符串

// 集中报错 action 的type值
export const 名字全大写 = 'type值'
// 组件中使用 引入常量type值
使用这写变量替换type值
// reducer.js 中
引入常量值 替换其中的字符串

新建文件 封装action

// 返回一个action对象 传入type 和 value
const XXXX = (type,value) => {
    return {
      type,
    value
  }
}