react- redux 2 基础使用

react- redux

• 全局状态管理

为什么要使用全局状态？帮助我们解决了什么问题
多组件共享状态， 任意的地方发生修改 页面都要更新

1. 全局状态值在组件里都能访问到
  * 在原型上添加属性来作为全局状态
  * context
  * 单独在内存中存放一个对象来做state的管理
2. 修改数据，
   用户通过dispatch 触发 数据修改函数, 返回新的数据赋值给state
3. 页面更新
   需要的组件通过subscribe 注册一个函数，保存到store对象的lister数组里
   数据改变的时候需要更新 事件分发

• reduce 的基本使用
  • getState
  • subscribe unsubscribe
  • dispatch
  • actionCreator
  • actionTypes

1.安装 redux

• npm install redux
• 创建 store 文件夹
• 创建文件
  • index.js 引入 redux
  • state.js 存放全局变量
  • reducer.js 存放 reduce 方法，存放修改变量的方法
  • actionCreatore.js 创建 action 将 action 操作做统一的管理
  • actionTypes.js 创建变量，以防方法过多使用使用变量错误,改文件可以没有，在操作方法和变量可以使用字符串，下方代码案例中使用了该文件

2.先上 reduce 代码

index.js

// 引入 createStore
import { createStore } from "redux";
// 引入 reducer 方法
import reducer from "./reducer";

const store = createStore(reducer);

export default store;

state.js

export default {
  name: "111111",
  age: "222222",
};

reducer.js

// 引入 全局变量
import DefaultState from "./state";
// 引入 type 类型
import { CHANGE_NAME, CHANGE_AGE } from "./actionTypes";
export default (preState = DefaultState, action) => {
  const newData = preState;

  const { type, payload } = action;

  console.log(type, payload);

  switch (type) {
    case CHANGE_NAME:
      newData.name = payload;
      break;
    case CHANGE_AGE:
      newData.age = payload;
      break;
    default:
      break;
  }
  return newData;
};

actionCreatore.js

/* eslint-disable import/no-anonymous-default-export */
/*
actionCreator 本质就是一个对象, 对象的目的是创建action
将action操作做统一的管理
*/
import store from "./index";
import { CHANGE_NAME, CHANGE_AGE } from "./actionTypes";

export default {
  [CHANGE_NAME](payload) {
    const action = {
      type: CHANGE_NAME,
      payload,
    };
    store.dispatch(action);
  },
  [CHANGE_AGE](payload) {
    const action = {
      type: CHANGE_AGE,
      payload,
    };
    store.dispatch(action);
  },
};

actionTypes.js

const CHANGE_NAME = "CHANGE_NAME";
const CHANGE_AGE = "CHANGE_AGE";
export { CHANGE_NAME, CHANGE_AGE };

3.使用 reduce 案例

引入 store

import store from "./store";

引入 actionTypes

import {CHANGE_NAME,CHANGE_AGE} from "./store/actionTypes"

引入 action 方法，来修改变量

import actionCreatore from "./store/actionCreatore";

在文件中使用 reduce

/* eslint-disable no-useless-constructor */
import React, { Component } from "react";
import store from "./store/index";
import actionCreatore from "./store/actionCreatore";
import { CHANGE_NAME, CHANGE_AGE } from "./store/actionTypes";

class Son1 extends Component {
  constructor() {
    super();
  }
  changeName = () => {
    // 不使用  actionTypes 的写法
    store.dispatch({
      type: "CHANGE_NAME",
      payload: "333",
    });
  };
  render() {
    return (
      <div>
        <h1>Son1</h1>
        {store.getState().name} -- {store.getState().age}
        // 不使用 actionTypes 的写法
        <button onClick={this.changeName}>改名</button>
        <button
          onClick={() => {
            actionCreatore[CHANGE_AGE](29);
          }}
        >
          改年龄
        </button>
      </div>
    );
  }
  componentDidMount() {
    // store.subscribe 再注册一个监听之后，会返回一个取消监听的函数
    this.unsubscribe = store.subscribe(() => {
      this.setState({});
    });
  }

  componentWillUnmount() {
    // 判断unsubscribe是否存在，若存在就执行
    this.unsubscribe && this.unsubscribe();
    console.log("组件销毁");
  }
}

export default Son1;