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
}