夜来风雨声，Redux知多少？_redux的diss算法-CSDN博客

本文链接：https://blog.csdn.net/qq_41022872/article/details/107239061

夜来风雨声，Redux知多少？

随着Vue、React、Angular框架的盛行，基于前端路由的单页面应用已经成为主流。单页面应用是指只有一个主页面的应用，一开始只需加载一次 js,css 等相关资源。所有的内容都包含在主页面，对每一个功能模块组件化。单页应用跳转，本质上是根据url挂载不同的组件，刷新局部资源实现页面跳转的假象。

那么，既然单页面应用是将展示的内容分成一块块的组件，那么必然涉及到各个组件之间数据共享的问题，那么我们组件之间的数据是如何共享的呢？

1 单页面应用中的数据共享方式

1.1 父子组件之间的数据共享

  // 父组件给子组件传值
  
  // 子组件
  class subComponent extends React.Component {
    render() {
      const data = this.props.data;
      return (<p> {data.tostring()}</p>)
    }
  }
  
  const data = {name: 'zaoren', age: 18}
  // 父组件
  class superComponent extends React.Component {
    render() {
      return <subComponent data={data}/>
    }
  }

1.2 子组件给父组件传值

  class subComponent extends React.Component {
    render() {
      const getChildData = this.props.getChildData;
      return (<p onClick={() =>{getChildData('hello world!')}}>{Pass value to parent component}</p>)
    }
  }
  
  class superComponent extends React.component {
   
    getChildData = (data) => {
      console.log(data)
    }
    render() {
      return <subComponent getChildData={getChildData}/>
    }
  }

看起来父子组件之间的数据共享还是比较方便的，只需要调用的时候需要的数据或者函数传给子组件就行。但是往往我们在开发的过程中涉及的逻辑往往会比较复杂，比如我不同模块之间需要共享数据（可以理解成非父子组件，或者并没有调用关系的两个组件需要数据共享），那么你一般会怎么做？也许很多小伙伴会告诉我使用localStorage或者sessionStorage也可以，确实如此。但是使用localStorage和sessionStorage会存在一些问题：

localStorage和sessionStorage中存储的类型只能是字符串，存取时需要转化
localStorage在safari浏览器的隐私无痕模式下不能使用（我还没试过）
localStoage中存太多数据回导致页面卡顿

使用Redux的优点： redux 能够方便快捷的驱使页面变化更新，而无需通过LocalStorage进行读写。怎么理解：我们组件在使用Redux来管理数据时，当我们某个组件需要用到redux中的数据，就会在创建组件的时候将redux中的某些数据传递进来，当redux中这个数据发生改变时，那么相应的，使用了这个数据的组件的props就改变了，组件就会重新渲染，达到页面变化更新的效果。

2 Redux中的一些概念

2.1 Store

Store就是我们存储数据的地方，整个应用只能有一个Store

 // store的创建
 import { createStore } from 'redux';
 const store = createStore(incrementReducer, applyMiddleware(sagaMiddleware));

// 在 index.js 的最外层传入store，使得整个应用共享store中的数据
 ReactDOM.render(
  <Provider store={store}>
    <ConfigProvider locale={zhCN}>
      <Routers />
    </ConfigProvider>
  </Provider>,
  document.getElementById('root'),
);

2.2 State

Store对象包含所有数据。如果想得到某个时点的数据，就要对 Store 生成快照。这种时点的数据集合，就叫做 State。当前时刻的 State，可以通过store.getState()拿到

// 不过在React中，我们通常使用 connect 方法将state传给某个组件
export default connect(
  (state) => ({
    number: state.number,
  }),
)(FullScreen);

2.3 Action

用户想要改变View，就需要改变State，而State是只读的。改变 State 的唯一办法，就是使用 Action，Action对象接收两个参数，第一个参数为type（和Reducer中对应起来）,第二个参数为要更新的数据（由于action的第二个参数一般从当前组件中动态获取，所以本人不太喜欢将action写在action文件夹中，而是直接传入一个对象）

2.4 Dispatch

store.dispatch是view唯一能够发出action来改变state的方法，disspatch接收一个action对象

dispatch({
  type: 'COUPON_LIST_UPDATE',
  data: {
    dataSource,
    pagination: {
      current,
      pageSize: pagination.pageSize,
      total: json.data.total,
    },
  },
});

2.5 Reducer

store收到Action之后，必须给出一个新的state，这样view才会改变。这种State的计算过程就叫做Reducer。Reducer是一个函数，他接收当前state和action对象作为参数，返回一个新的state。

const incrementReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'INCREMENT': {
      // 保证每一次都返回一个新的state
      state.number += 1; 
      return { ...state };
    }
    case 'CHANGE_TITLE': {
      state.title = action.title;
      sessionStorage.setItem('title', action.title);
      return { ...state };
    }
    case 'LOGIN': {
      state.isLogin = action.isLogin;
      sessionStorage.setItem('isLogin', action.isLogin);
      return { ...state };
    }
    default: return state;
  }
};

3 在chrome中安装redux-devtools插件

reducer中数据很多的时候，我们难免看得烟花缭乱，这时候借助一款插件能帮助我们轻松管理reducer中的数据，安装教程如下：

3.1 在chorme商店安装插件（科学上网）

3.2 在项目的store文件中添加插件配置

import { createStore, compose, applyMiddleware } from 'redux';
import createSagaMiddleware from 'redux-saga';
import incrementReducer from '../reducers/index';
// import { watchIncrementAsync } from '../sagas/index';

const sagaMiddleware = createSagaMiddleware();

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

const store = createStore(incrementReducer,
  // eslint-disable-next-line no-underscore-dangle
  composeEnhancers(
    applyMiddleware(sagaMiddleware),
  ));
// sagaMiddleware.run(watchIncrementAsync);

export default store;