7. mapStateToProps
7.1 基本概念
mapStateToProps看名字:
就是把redux管理的state状态 映射到当前组件的prop属性上,状态比较多所以加s2.了解
vuex的同学,其实这里类似 辅助函数mapState,组件中使用像使用组件自己的data一样来使用3.简单总结就是,像
使用组件自己的props属性一样,使用redux的state
7.2 mapStateToProps 具体配置
mapStateToProps的函数快捷方式 是mstp,驼峰嘛这个是在组件的外面写的 ,不要写到
class组件里面哦
const mapStateToProps = (state, ownProps) => { console.log("redux 里的state",state) console.log("自己的属性",ownProps) return { // counter: state.page404.counter ...state.page404 } }
这里面参数1:就是
redux里的state这里面参数2:就是 当前组件自己的的
props
7.3 返回值 2种写法
方式---1 基础写法
但是具体的看你自己风格
return { counter: state.page404.counter // page404:state.page404 }
方式--2 展开运算符
return { ...state.page404 }
8. mapDispatchToProps
8.1 基本概念
mapDispatchToProps看名字:
就是把redux的状态管理函数 映射到 组件的props上2.了解
vuex的同学,其实这里类似 辅助函数mapMutations,组件中使用像使用组件自己的method一样来使用3.简单总结就是,像
使用组件自己的props属性一样,使用redux的action
- 这里 其实对比
vue发现,react结构相对简单 都是在props上挂着
8.2 mapDispatchToProps具体配置
mapDispatchToProps的函数快捷方式 是mdtp,驼峰嘛这个是在组件的外面写的 ,不要写到
class组件里面哦
// 把订阅/监听 映射到属性上 const mapDispatchToProps = (dispatch, ownProps) => { return { incremented: (payload) => { dispatch({ type:"counter/incremented", payload }) }, decremented: (payload) => { dispatch({ type:"counter/decremented", payload }) } } }
这个type
counter/incremented是reducer404.js里面的保持一致参数为了省事 我直接 写一样了,属性和key一样可以省略
9. 组件使用
9.1 效果预览
1.png
9.2 简易代码
- 获取 直接
this.props.counter- 修改
this.props.incremented(10)
<div> <button onClick={ () => { this.props.incremented(10) } }> +加 </button> <span>获取conter:{this.props.counter}</span> <button onClick={ () => { this.props.decremented(5) } }> -减 </button> </div>
10. 404界面action拆分
1.
Action本质上是 JavaScript 普通对象。我们约定，action内必须使用一个字符串类型的type字段来表示将要执行的动作。2.目录
src/pages/404/store/actions.js3.创建记录当前组件所有的
action4.导出方式 根据自己风格来
// 命名 统一的后缀 前缀 下划线 export const incremented_action =(payload)=> { return{ type:"counter/incremented", payload, text:"计数器加法" } } export const decremented_action =(payload) =>{ return{ type:"counter/decremented", payload, text:"计数器减法" } }
11.action使用
1.引入2种方式根据自己的情况选择
- 具名导入
- 别名导入
11.1 导入
// import { incremented_action, decremented_action} from './store/actions'; // 引入所有 并重新命名 import * as all_actions from './store/actions';
11.2 使用
保留了一种未拆分的写法 作为对比
const mapDispatchToProps = (dispatch, ownProps) => { return { incremented: (payload) => { dispatch({ type: "counter/incremented", payload }) }, decremented: (payload) => { dispatch(all_actions.decremented_action(payload)) } } }
12.总结
redux:核心框架和react没有什么关系,可以在配合其他框架使用
react-redux: 为react设计,让redux在react中使用更方便1.
srotre注入到根组件上,为了所有组件都能用2.
connect和注入sotre产生关系,进而可以修改状态3.属性和监听映射到组件属性上
4.拆分reducer 合理管理整个项目的状态
