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)