15 redux

1.在store 文件中新建index.js 文件

// store的入口文件(需要一个创建仓库的方法)
import { createStore } from 'redux'
import reducer from './reducer'
// 声明一个仓库。用createstore创建出来，引用reducer函数
//window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() 配置这个否则ReduxDevTools工具无法使用
const store = createStore(reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__())
// 导出仓库，方便外界使用
export default store

2.在store 文件中新建reducer.js 文件

// 管理数据的文件
/* 
reducer.js只做两件事:
1-声明默认数据(状态)
2-导出一个函数
*/
// 默认数据
const defaultState = {
    arr: [],
    txtVal: ""
}
// 导出一个函数(state，action)
// 这个函数默认需要返回一个state
// eslint-disable-next-line
export default (state = defaultState, action) => {
    //深拷贝
    let newState = JSON.parse(JSON.stringify(state));
    //这个函数专门用来修改这个数据
    //action专门接收组件中调用dispatch方法时候的参数
    switch (action.type) {
        case '':

            break;

        default:
            break;
    }
    return newState;
}

3 获取仓库数据

store.getState()//获取redux仓库数据

4 同步界面和redux数据更新 

 constructor(props) {
        super(props)
        // 传递一个修改界面的方法到store里面去，让它内部调用
        // store在订阅我们的这个修改界面的方法
        store.subscribe(this.storeChange.bind(this))
    }
    //同步界面和redux数据更新
    storeChange() {
        //目前仓库里面的数据已经更新了，但是界面还没更新
        //界面更新需要调用this.setState()
        //又因为仓库数据已经更新，所以store.getState()就是最新数据
        this.setState(store.getState())
    }

5 修改仓库数据

        store.dispatch 触发修改仓库的数据

        action必须传，是一个对象，要有两个属性

        type: 表示本次修改的动作的名字

        value: 就是要传的参数

         let action = {

              type: '',

              value: ''

          }

          store.dispatch(action)