react中redux的使用1.react中的redux相当于Vue中的vuex,都是用于存放数据,常用于数据的频繁交互

1.react中的redux相当于Vue中的vuex,都是用于存放数据,常用于数据的频繁交互

2.使用redux就得必须安装redux

// 安装redux
yarn add redux

3.使用redux就得创建一个仓库,在src文件夹下创建一个store文件夹,作为仓库使用。在其中新建 index.js 与 reducer.js ，分别写：

store/index.js 中：

//引入redux里面的createStore对象
import { createStore } from "redux";
//引入reducer
import reducets from "./reducets";
// 创建仓库,以reducer数据为支撑
const store = createStore(reducets, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__())
export default store

store/reducer.js 中：


// 存放数据和处理数据

// 创建一个对象来存放最初的默认数据
const defaultState = {
    // input数据
    inpVal: "",
    // 列表数组
    ListArr: [
        'Racing car sprays burning fuel into crowd.',
        'Japanese princess to wed commoner.',
        'Australian walks 100km after outback crash.',
        'Man charged over missing wedding girl.',
        'Los Angeles battles huge wildfires.',
    ],
    num: 0

}
// 导出 redux中的导出不是直接导出,而是导出一个箭头函数
// eslint-disable-next-line
//注意:state: 指的是原始仓库里的状态。
//action: 指的是action新传递的状态。
export default (state = defaultState, action) => {
// 因为reducer.js是用于存放数据和处理数据,而不能直接修改数据,因此需要对数据进行深拷贝,然后修改深拷贝出来的数据
    let ArrState = JSON.parse(JSON.stringify(state))
    return ArrState
}

4.在组件中引入仓库

// 导入仓库
import store from "./store";

同时在组件中使用仓库里面里面的数据

 constructor(p) {
        super(p)
        //使用仓库里面的数据,通过store.getState()获取
        this.state = store.getState()
    }

5.事件驱动,在组件中把事件写成如下格式:

然后在store/reducer.js中添加对应的数据修改,因为此刻数据在store/reducer.js中,没办法直接在组件中修改,因此在store/reducer.js里面的导出里面修改,可参考下面的修改数据代码

// 导出
// eslint-disable-next-line
//注意:state: 指的是原始仓库里的状态。
//action: 指的是action新传递的状态。
export default (state = defaultState, action) => {
    let ArrState = JSON.parse(JSON.stringify(state))
    //action.type对应前面事件事件驱动时创建的action里面的type值
     //action.value对应前面事件事件驱动时创建的action里面的value值
    switch (action.type) {
        case CHANGE_FN_VAL:
            ArrState.inpVal = action.value
            break;
        case ADD:
            ArrState.ListArr.push(ArrState.inpVal)
            ArrState.inpVal = ""
            break;
        case ADDFN:
            ArrState.num += action.value
            break;

        default:
            break;
    }
    return ArrState
}

此刻,事件的绑定以及基本完成了,事件驱动数据的修改也可以实现,但如果是输入框的话,此刻,还不能在输入框中输入内容,需要对输入框进行一个订阅处理

6.订阅在组件中添加 store.subscribe(this.ChangVal.bind(this))

代码情况如下

// constructor(p) {
    //     super(p)
    //     this.state = store.getState()
      store.subscribe(this.ChangVal.bind(this))
    // }

最后对订阅里面的事件进行驱动修改数据

 ChangVal() {
      this.setState(store.getState())
    }

此刻,即可实行在输入框输入内容,输入款实时更新数据的效果了

react中redux的使用