redux的初步实现
redux与vuex一致,在这里由store/index.js定义需求,通过dispatch将需求发给reducer,具体什么时候发,由页面(.html/.vue/.jsx)来触发
react与vue一样,都存在父传子、子传父、兄弟组件之间的传值,单纯的页面
之间传值的实现方式需要掌握是肯定的,比如
父传子:
由父组件在调用子组件的时候将要传递的值通过属性绑定的方式,再由子组件
通过props接收,可以回溯到react的state里面去(vue回溯到data里面去),再在
相应的地方进行渲染。
子传父:
由父组件定义函数,将函数传递给子组件触发,子组件在触发的同时将自己的
数据作为参数传递(执行的是父组件的方法,子组件在触发的时候将自己的数据作为
参数传递进父组件的函数,实现父组件的业务逻辑)
兄弟组件传值:
兄弟组件传值,react与vue的区别较大。
假设react由App这个根组件,和App的两个子组件Com1、Com2两个子组件组成
想要通过Com2的方法驱动Com1的数据发生改变,不同的两个组件之间是无法进行沟
通的,所以可以通过将Com1的数据和Com2的方法都提升到App这个父组件里面去,再
由Com2的函数触发,告知父组件改变数据,再将数据传递给Com1进行渲染
而vue是通过事件总线的方法实现兄弟组件之间的通信,具体后续详述。
不过相同的是,不管是react还是vue都可以通过一个机制管理所有公用的数据、
函数,vue---vuex,react---redux
vuex的实现思路
1.定义src/store/index.js,
1> 引入redux ->2.引入src/store/reducer.js ->3.暴露store
index.js
// 1.引入redux
import { createStore } from 'redux'
// 2.与reducer建立联系
import reducer from './reducer'
// 3.暴露store
export default createStore(reducer)
reducer.js
// 定义好数据
const defaultState = {// 类似于vue的state
count:1
}
export default (state = defaultState,action)=>{
return state
}
2.在App.js 的原型constructor里使用store的方法
this.state = store.getState(),这时候就可以在App里面使用store里面的数据了
import React, { Component } from 'react'
import store from './store'
export default class App extends Component {
constructor(){
super()
this.state = store.getState()
}
render() {
return (
<div>
this is App
<br />
store里面的数据---{'>'}{this.state.count}
</div>
)
}
}
3.在其他组件里面如果也想使用store里面的数据,只需要在页面里面跟App.js一样:
1>引入store: import store from ‘./store’
2>在原型构造函数(constructor)中定义: this.state = store.getState()
3>在想要使用的地方使用即可:store 里面的数据–>{this.state.count}
import React, { Component } from 'react'
import store from '../store/index'
export default class com1 extends Component {
constructor(){
super()
this.state = store.getState()
}
render() {
return (
<div>
this is Com1
<br />
<span>Com1 使用redux里面的数据---{'>'}{this.state.count}</span>
</div>
)
}
}
其实只是把自己页面的数据提到公用的store里面去了,然后在想用的地方调用即可