redux的初步实现

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里面去了，然后在想用的地方调用即可