redux 简单实现各组件状态管理

一、redux 特点

1. redux 是集中管理共享状态的 JS 插件库
2. store 用于存储状态的容器，唯一状态树，即：store 的 state 是一个对象，且是唯一的
3. action 组件改变 store 状态时，发布的动作
4. reducer 纯函数，在不改变 store 状态的情况下返回最新 state 状态

二、redux 主要方法

createStore(reducer)          创建 store
store.getState()              获取 state
store.dispatch(action)        发布 action
store.subscribe(method)       订阅 method
combineReducers(reducers)     合并 各组件reducer

三、 redux 数据管理分析

1. 如何创建 store，管理各个组件

将 combineReducers(reducers) 作为参数传入 createStore(reducer) 方法中

2. 如何在组件中获取当前组件在 store 中的状态

在组件中通过 store.getState.reducerName() 方法获取 store 中状态

3. 如何修改当前组件在 store 中的状态

1. 首先，在组件中通过 store.dispatch(action) 方法派发 action，告诉 store 需要修改哪个reducer，怎么修改
2. 然后，在 store/index.js 创建组件reducer，即：结合原store数据和派发 action，返回新的 store 状态
3. 最后，在组件中通过 store.subscribe(method) 方法订阅 store 状态变化并触发 method 回调，并在 method 回调中修改组件状态数据

四、redux 示例

1. 安装 redux

npm install redux -S

2. 将 store 状态映射到组件的 state 中

1. 创建 src\store\index.js，定义 store

import { createStore, combineReducers } from "redux";

// 1. 创建 reducer1
const reducer1 = ( state = { num1: 1 }, action ) => {
  switch (action.type) {
    case "reducer1/CHANGE_NUM1":
      return Object.assign({}, state, {
        num1: action.payload,
      });
    default:
      return state;
  }
};

// 2. 创建 reducer2
const reducer2 = ( state = { num2: 100 }, action ) => {
  switch (action.type) {
    case "reducer2/CHANGE_NUM2":
      return Object.assign({}, state, {
        num2: action.payload,
      });
    default:
      return state;
  }
};

// 3. 通过 combineReducers 合并 reducer
const rootReducer = combineReducers({
  reducer1,
  reducer2,
});

// 4. 创建 store
const store = createStore(rootReducer);
export default store;

2. 在 Home 组件中

import React, { PureComponent } from "react";
import store from "../../store";

class Home extends PureComponent {
  constructor(props) {
    super(props);
    // 5. 将 store 中 reducer1 状态映射到 state 中
    this.state = {
      ...store.getState().reducer1,
    };

    this.numAdd = this.numAdd.bind(this);
    this.initStoreNum = this.initStoreNum.bind(this);

    store.subscribe(this.initStoreNum);
  }
  render() {
    return (
      <>
        
 redux-combineReducers 
        
 {this.state.num1} 
         num1 ++ 
      
    );
  }
  numAdd() {
    store.dispatch({
      type: "reducer1/CHANGE_NUM1",
      payload: this.state.num1 + 1,
    });
  }
  initStoreNum() {
    this.setState({
      num1: store.getState().reducer1.num1,
    });
  }
}

export default Home;

3. 修改 store 状态

1. 创建 src\store\index.js，定义 store

import { createStore, combineReducers } from "redux";

// 2. 创建组件的 reducer，结合派发的 action 返回最新 store 的状态
const reducer1 = ( state = { num1: 1 }, action ) => {
  switch (action.type) {
    case "reducer1/CHANGE_NUM1":
      return Object.assign({}, state, {
        num1: action.payload,
      });
    default:
      return state;
  }
};

const reducer2 = ( state = { num2: 100 }, action ) => {
  switch (action.type) {
    case "reducer2/CHANGE_NUM2":
      return Object.assign({}, state, {
        num2: action.payload,
      });
    default:
      return state;
  }
};

// 3. 通过 combineReducers 合并组件 reducer
const rootReducer = combineReducers({
  reducer1,
  reducer2,
});

const store = createStore(rootReducer);
export default store;

2. 在 Home 组件中

import React, { PureComponent } from "react";
import store from "../../store";

class Home extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      ...store.getState().reducer1,
    };
    this.numAdd = this.numAdd.bind(this);
    this.initStoreNum = this.initStoreNum.bind(this);

    // 4. 订阅并修改 reducer1 状态
    store.subscribe(this.initStoreNum);
  }
  render() {
    return (
      <>
        
 redux-combineReducers 
        
 {this.state.num1} 
         num1 ++ 
      
    );
  }
  numAdd() {
    // 1. 派发 reducer1 最新状态
    store.dispatch({
      type: "reducer1/CHANGE_NUM1",
      payload: this.state.num1 + 1,
    });
  }

  // 5. 实现修改 reducer1 状态
  initStoreNum() {
    this.setState({
      num1: store.getState().reducer1.num1,
    });
  }
}

export default Home;