react中redux基础使用笔记

首先
安装npm install redux

下面是个人理解的原理
员工提出需求(组件) -> 组长上报(actionCreator) -> 经理接收需求(store) –> 总裁查看需求并处理(reducer) –> 告诉经理处理结果(state) -> 员工需求处理完毕 等待提出新需求

中间控件（经理）（store）

创建中间控件import {createStore} from ‘redux’ （将修改操作通知给总控）
引入总控插件 import Reducer from ‘./recuder’ （修改数据总将修改后的数据返回给）
关联总控插件let Store = createStore(Reducer)
抛出 export default Store

收件总控（总裁）（reducer）

设置默认数据或引入默认数据
let state = {}
或引入抛出数据的文件
export default {}

export default(prevState = state,actions)=>{
console.log('接受数据',prevState,actions)
let newData = prevState
数据的修改
let {type,payload} = actions
根据type决定修改哪些内容
switch (type) {
case 'CHANGE_AGE':
newData.age  = payload
break;
default:
break;
}
// 返回的数据㐊修改后的数据 也是getState获取到数据
return newData
}

提交方法控件（组长）（actionCreator）

引入中间控件import store from './store'
export default {
changeTest(){
let action={
type:'CHANGE_TEST',
payload:88
}
store.dispatch(action)
},
changeName(name){
action 里type是必须的其他的随意 因为需要type数据来决定修改哪项数据
let action={
type:'CHANGE_NAME',
payload:name
}
store.dispatch(action) 使用dispatch方法提交给中间控件（经理）
}
}

使用数据并修改（员工使用物品并提出需求）（组件）

import React, { Component } from 'react';
引入中间控件拿取数据 import store from './store/store'
引入提交方法控件import ActionCreator from  './store/actionCreator'
class Person1 extends Component {
componentDidMount(){
挂载完成后 监听数据的改变（总裁是否看了需求）
store.subscribe(()=>{ 数据改变（总裁给出了结果）
this.setState({}) 刷新页面上使用中的数据
})
}
render() {
let { test} = store.getState() 数据结构赋值得到数据
return (
<div>
<p> {test}</p> 使用数据
<button onClick={()=>{
ActionCreator.changeTest() 提交修改数据请求（提出需求告知组长）
}}>修改数据</button>
</div>
);
}
}

export default Person1;

优化 使用高阶组件
将监听数据改变和获取数据给整合一下 使用props自定义属性的方法将数据传出去
并使用this.props接收数据

import React, { Component ,Fragment} from 'react';
import store from './store/store'
export default (TmpComponent)=>{

class Connect extends Component {
componentDidMount(){ 监听数据改变并重新渲染数据
store.subscribe(()=>{
this.setState({})
})
}
render() {
let {test} = store.getState() 获取数据
return (
<Fragment>
<TmpComponent test={test}></TmpComponent> 传数据
</Fragment>
);
}
}

return Connect
}

• 点赞
• 收藏
• 分享
• 文章举报