Provider这个组件的作用:
它是react-redux的核心组件,它可以将store提供给它里面的每一个组件
~~~
import {Provider} from 'react-redux';
import store from './store';
const App ={
<Provider store={store}>
<App/>
</Provider/>
}
~~~
但是只提供是不行的,如果组件想和store连接,还需要connect组件
~~~
//App.js组件
import {connect} from 'react-redux';
//怎么连接,connect方法接受三个参数
const mapStateToProps =(state)=>{
return {
inputValue:state.inputValue
}
}
const mapDispatchProps=(dispatch)=>{
return {
changeInputValue(e){
const action = {
type:'inputChange',
value:e.target.value
}
dispatch(action)
}
}
}
export default connect(mapStateToProps,mapDispatchProps)(App)
//mapStateToProps表示将store的数据和组件的数据作映射
//将dispatch方法和store中的数据作关联
mapDispatchProps
// 可以让props的方法,派发action,操作store中的数据
~~~
- react
- 第一章 React入门
- 1-1 开发环境搭建
- 1-2 循环
- 1-3 jsx语法
- 1-4 react特点
- 第二章 基本语法
- 2-1 组件
- 2-2 实现一个简单的TodoList
- 2-2-1删除
- 2-3 组件之间的传值
- 2-4 子组件向父组件传值
- 2-5 react-router实现一个简单路由
- 2-6 ref的使用
- 2-7 setState方法
- 2-8 生命周期函数
- 2-9 react的css过渡动画
- 2-10 react中的内联样式
- 2-11 事件
- 2-12 箭头函数
- 第三章 redux
- 第一节 使用
- 1.1 action
- 1.2 实现todoList的增删功能
- 1.3 actionTypes的拆分
- 1.4 actionCreators.js统一管理action
- 1-5 redux设计的三大原则
- 第二节 安装Redux
- 第三节 redux进阶
- 3.1 ui组件和容器组件的拆分
- 3.2无状态组件
- 3.3 Redux-thunk中间件ajax请求数据
- 3.4redux中间件
- 3.5 redux-saga中间件
- 第四节 react-redux
- 第四章 项目启动
- 第一节 styled-components
- 1-1 style 引入背景图片
- 1-2 样式组件
- ant-design
- 1.起步