前提警示:react、redux之间没有本质关系,redux可以结合其他库使用。redux数据管理方式跟react的数据驱动视图理念很合拍,一起使用,开发更加的便利高效
适用场景
- 小型项目 react 数据管理props state即可满足需求
- 组件嵌套共享数据 中间件redux
redux 中的store
- 存放一个数据对象
- 外界能访问到这个数据
- 外界也能修改这个数据
- 当数据有变化的时候,通知对应组件修改状态
store的工作流程
- What:想干什么 --- dispatch(action)
- How:怎么干,干的结果 --- reducer(oldState, action) => newState
- Then?:重新执行订阅函数(比如重新渲染UI等)
- 这样就实现了一个store,提供一个数据存储中心,可以供外部访问、修改等,这就是Redux的主要思想。。
redux 使用流程
- 下载 npm i redux -S
- src新建store文件夹,并新建子文件index.js / reducer.js
// index.js 入口文件创建store实例
import {createStore} from 'redux'
import reducer from './reducer.js'
const store = createStore(reducer);
export default store;
// reducer.js 处理数据
const defaultState={
carList:[]
}
export default (state=defaultState, action)=>{
// 拷贝数据 修改数据 返回数据
const newState = JSON.parse(JSON.stringify(state))
if(action.type == 'add_car_item'){
newState.carList.push(action.data);
return newState;
}
return state;
}
- 页面中需要访问store引入
import store from '../store/index'
- 需要修改数据的文件 定义action(类型,值)store触发 store.dispatch(action)
- 从store中取值
import store from '../store/index'
export default class Car extends Component {
constructor(props){
super(props)
this.state = store.getState();
// 监听store数据变化
this.watch = store.subscribe(this.changeState.bind(this))
}
render() {
return (
<div>
我是购物车页
</div>
)
}
changeState(){
this.setState(store.getState())
}
componentWillUnmount(){
this.watch(); // 取消监听 防止内存泄漏
}
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。