redux的使用以及redux devtools调试工具

redux和vuex一样是用于管理全局共享数据的工具。

调试工具

工欲善其事必先利其器，打开谷歌浏览器

点击这三个点->更多工具->扩展程序

redux的使用以及redux devtools调试工具

点开这个

redux的使用以及redux devtools调试工具

打开chrome网上商店搜索Redux DevTools并安装。出现下面这个图标说明安装成功了

redux的使用以及redux devtools调试工具

接下来看一下目录结构吧

redux的使用以及redux devtools调试工具

src目录下的Store文件就是用来管理共享数据的脚本文件夹。
actionTypes.js：用来定义常量的文件，这里的常量是为了统一下面reducer中action中传入的type值（方便维护）

const CHANGE_INPUT_VALUE = 'change_input_value'

export {
  CHANGE_INPUT_VALUE
}

index.js：是用来统一暴露store和操作Store的入口，引入redux模块并使用模块中的createStore方法来创建store并暴露出来。
方法中传入具体的数据和对应的数据操作reducer。
还有加入window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__())是为了能在谷歌浏览器中用redux devtools调试工具。

/统一处理暴露数据的地方
import {createStore} from 'redux'
import reducer from './reducer.js'

const store = createStore(
  reducer,
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__())//配置调试工具

export default store;

reducer.js：这是存数据和改变数据方法的地方。这里有几个要注意的地方1.不能直接在这边改变数据，而是要return给store让store来汇总改变数据。2.改变数据的方法中不能有任何异步的方法。3.每个action改变数据都会传入一个type常量来判断要改变的对象和对应进行的操作。

import {CHANGE_INPUT_VALUE} from './actionTypes'
const defaultState = {
  value: '我的共享数据'
}
export default (state = defaultState,action) => {//state是之前的数据，action是新的数据
  if (action.type === CHANGE_INPUT_VALUE) {//不能有异步操作
    const newState = JSON.parse(JSON.stringify(state))//深拷贝因为可以接受state，但是不能改变state
    newState.value = action.value
    return newState//返回给store让store来改变数据（不能直接在这里改变数据）
  }
  return state;
}

actionCreators.js：这个文件是为了统一放置要改变数据的action对象参数也是为了方便管理，避免每个页面中都有action对象后期难以维护。

//统一定义action避免每个文件都有action太过分散不好维护
import {CHANGE_INPUT_VALUE} from './actionTypes'
const getInputChangeValue = (value) => ({
  type: CHANGE_INPUT_VALUE,
  value: value
})

export {
  getInputChangeValue
}

使用redux

在页面中引入对应的redux文件
store.getState()可以取到所有的store的数据
store.subscribe(callback)在store数据发生改变的时候会触发这个方法，可以传入一个回调函数来进行数据改变后相应的操作
store.dispatch(Object)通过这个方法可以改变store的数据，你可以传入一个对象这个对象中要有type和value这两个值，type是前面说到的常量（reducer通过常量来判断要进行什么操作），action是改变后的值

import store from './Store/index'//引入共享的数据
import {getInputChangeValue} from './Store/actionCreators'//集中action到js文件中




constructor () {
    super()
    this.state = {
      inputValue: store.getState().value,//取到共享的数据
      list      : []
    }
    store.subscribe(function () {
      console.log('store的数据改变了')
    })//组件订阅store,当store数据改变时触发
  }

  InputChange (event) {
    //改变store的数据（没有简化的）
    // const action = {
    //   type: CHANGE_INPUT_VALUE,
    //   value: event.target.value
    // }
    // store.dispatch(action)

    store.dispatch(getInputChangeValue(event.target.value))//直接取action对象
    // this.setState({//这是没有用ref
    //   inputValue: event.target.value
    // })
    this.setState({//这是用ref获取dom元素
      inputValue: this.input.value
    },() => {
      console.log('setState函数执行完了才执行(页面更新口才获取dom要在这里)')
    })
  }

个人感觉redux的状态管理相对vuex来说还是比较繁琐的，使用也没有vuex方便（有可能是我学习不够深入的原因吧）

redux的使用以及redux devtools调试工具

相关推荐