react-redux应用
2019-04-02 本文已影响0人
Mr无愧于心
- react-redux是把redux进一步封装，适配react项目，让redux更加简洁
- 在真实项目中使用react-redux，所用的store文件夹配置与redux时一样，只是在进行数据传输的时候，react-redux产出的语法糖帮助我们编写代码的时候简化了一些步骤
react-redux提供的
- Provider组件
React-Redux 提供Provider组件，可以让容器组件拿到state。 - connect函数
React-Redux 提供connect方法，用于从 UI 组件生成容器组件。
Provider组件
1.引入Provider组件
import store from './store/index.js';//引入store
import {Provider} from 'react-redux';
- 在当前项目的根目录下使用Provider组件 (注意：一个子元素，挂载store)
RenderDOM.render(<Provider store={store}>
//把创建的store基于属性传递给Provider（这样后代组件中都可以使用这个store了）
<div>//Provider组件 中只允许出现一个子元素
<Head></Head>
<Main></Main>
</div>
</Provider>,root)
- 这样所有的子组件都可以通过connect函数来使用store的状态了
connect函数
- 引入connect
import {connect} from 'react-redux';
- 此时，其他组件的编写 导出的不再是创建的组件，而是基于connect构造后的高阶组件
export default connect([mapStateToProps],[mapDispatchProps])(自己创建的组件)
- mapStateToProps:把redux容器中的状态，赋值给组件的属性
let mapStateToProps=(state)=>{/
//state就是redux中的状态信息
//返回的是啥，就把它挂载到当前的属性上（redux存储很多的信息，想用啥就返回啥）
return {...state.head}
}
- mapDispatchToProps :把rudex中的dispatch派发行为遍历，也赋值给组件的属性（actionCreater）
let mapDispatchToProps=(dispatch)=>{
//dispatch:store中存储的dispatch方法
return {//返回的是啥就相当于把啥挂载到组件的属性上（一般我们挂载一些方法，这些方法完成了dispatch派发任务操作）
init(initData){
dispatch({type:'xxx',initData})
}
......
}
}
- react-redux把reaction-creator中编写的方法（返回action对象的方法），自动构建成了dispatch派发任务的方法，也就是mapDispatchToProps这种格式（diapatch不需要了）
export default connect(state=>({...state.head}),action.head)(HeadComponent)
- 以前我们需要自己基于subscribe向事件池追加方法已达到容器状态改变信息，执行追加的方法，才能实现重新渲染组件，reaxt-redux帮我们做了这件事 所有用到redux容器状态信息的组件，都会向事件池追加一个方法，当信息改变了，通知方法执行，把最新的状态信息作为属性传递给组件，组件的属性值改变了，组件也会重新渲染（subscribe，getState不需要了）
- 此时通过connect的子组件能够通过this.props.store拿到所有需要的store中的数据了
- react-redux的简单实现
