1.前言
上篇文章轻松搞定 redux-1 已经对
redux有了初步的认识项目实战 练习下
2.全局使用-引入
// redux import store from "./store" // 放到react原型链顶层 原型思想 Component.prototype.store = store;
注意
这个
redux文件如果你使用上节的话创建存储器后的代码都可以删除
然后加个导出
let store = createStore(reducer) export default store
3.找个页面来玩耍
1.获取redux数据
store.getState()
store.dispatch()修改数据
<p> {this.store.getState().counter}</p> <button onClick={() => { this.store.dispatch({type:"A",value:10}) }}> 修改 counter </button>
4.修改不生效---解决
构造函数里面订阅状态修改
subscribe
constructor(props) { super(props); this.state = { ...this.store.getState(), } this.store.subscribe(() => { this.setState(this.store.getState()) }) }
5.自己组件的状态咋玩呢
构造函数内
展开运算符
{ super(props); let defaultState = { des:"组件自己的状态", age:30 } this.state = { ...this.store.getState(), ...defaultState } this.store.subscribe(() => { this.setState(this.store.getState()) }) }
6.获取方式
<h3>state-{ this.state.des}</h3> <p> store--{this.store.getState().counter}</p> <p> 新的方式--{this.state.counter}</p>
