redux的简单实用，一个小例子，进行 “无关系组件的通信、共用一个状态”实验

零、前言

1 同事觉得我和他对redux理解中，他说我们其中有一个人出了偏差。

2 这是我自己的理解：

2.1假想有这么一个情况。

 

2.2 假定我们不用Redux，那么比如 组件C改变了登录状态，他需要“一步步往上跟父组件说明登录状态的变化，然后最顶【最开始共同的父组件】的A知道后，就要“一步步往下通知到C“，这样代码就显得冗余、难以维护了。

2.3 假定我们用了Redux就那么没有那么麻烦了。【相关核心代码放在下面了】

 

一、相关验证的核心代码

1 目录结构

2  reducer方法的编写

// 定义默认状态

let init_state = {
  common: '我是共同的变量（用来显示登录状态信息）',
};

function reducer(state = init_state, action) {
  let temp;
  switch (action.type) {
    case '登陆':
      temp = JSON.parse(JSON.stringify(state));
      temp.common = '登陆';
      return temp;
      // break;
    case '注销':
      temp = JSON.parse(JSON.stringify(state));
      temp.common = '注销';
      return temp;
      // break;
  }
  return state;
}

export default reducer;

3 通过 createStore方法创建唯一的 store 并导出【然后任意组件处都可以通过 引入store、store.getState() 拿到应用的所有数据，可能实际开发不是这样？？】

import { createStore } from 'redux';
import reducer from './reducer';

// console.log(window.__REDUX_DEVTOOLS_EXTENSION__);

let store = createStore(
  reducer,
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);

export default store;

4 组件A

import React from 'react';
import B from './B';
import D from './D';

export default class A extends React.Component{
  constructor(props) {
    super(props);
    console.log(this);
  };

  render() {
    return (
      <React.Fragment>
        <div>A:</div>
        <div>
          <B/>
          <D/>
        </div>
      </React.Fragment>
    )
  }
}

组件B

import React from 'react';
import C from './C'

class B extends React.Component{
  constructor(props) {
    super(props);
    console.log(this)
    this.state = {
      // ...
    }
  };

  render() {
    return (
      <div>
        B：
        <C/>
      </div>
    )
  }
}

export default B;

组件C【组件D和C大同小异，就不贴，主要就是把 C 改成 D】

import React from 'react';
import store from "../store/store";

class C extends React.Component{
  constructor(props) {
    super(props);
    this.changeToC = this.changeToC.bind(this);
    this.state = {
      common: store.getState().common
    };

    // 进行 store变化的监听
    store.subscribe(() => {
      console.log(store.getState());
      this.setState({
        common: store.getState().common
      })
    });
  };

  render() {
    return (
      <div>
        <div>C:</div>
        <div>store.getState()common: {this.state.common}</div>
        <button onClick={this.changeToC}>点击，common变成登陆</button>
        <button onClick={this.changeToD}>点击，common变成注销</button>
      </div>
    )
  };

  changeToC = () => {
    store.dispatch({
      type: '登陆'
    });
  };
  changeToD = () => {
    store.dispatch({
      type: '注销'
    });
  };

}

export default  C;

 

二、演示效果

1 初始状态

 

2 不管点击 C 或 D 的登陆按钮，都会下面的效果

3 点击 C 或 D 的注销按钮

 

注：之前也写了一篇 Redux的简单实现。

感兴趣的传送门：  https://mp.csdn.net/postedit/102564065