react项目中的redux操作流程

react项目中的redux操作流程

redux作为状态管理的工具，使我们每位前端必会的。redux不依赖于任何框架，不仅仅是react框架可以使用，在Vue，小程序这些都能用redux进行状态管理。在vue中已经内置了一个vuex，再用redux我觉得就没有必要了。
在react框架里，有react-redux进行状态管理，但是也是依赖于redux的。因此，学习redux是必需的。
使用redux可以管理状态，用于父子间的通信；也能够进行数据缓存，减少服务器压力，提高用户体验。
下面我就用侧边栏的展开与合并来和大家分享一下redux的操作流程。

点击这个按钮来操作侧边栏的展开与合并

1.安装redux

npm install --save redux

2.创建store.js文件

在 src 文件夹下创建一个 redux 文件夹，在文件夹里创建一个 store.js 文件，在文件中导入 createStore，store 不能直接修改状态，需要交给 reducer 修改

// store.js 文件

import { createStore } from "redux"; //创建一个store对象
//创建一个reducer ，接收老状态，深复制一份，返回新状态
const reducer = (prevState, action) => {
  return prevState;
};
const store = createStore(reducer);
export default store;

这样我们就创建了一个史上最没有意义的 store，因为 store 没有做任何事

3.订阅者-发布者模式

创建完 store 后，然后就是进行‘订阅者–发布者模式’了
Store 的本质就是基于订阅者-发布者模式的，store 作为一个中间者，发布者发布消息（store.dispatch()），通过 store 来通知订阅者更新（store.subscribe(()=>{})）

（1）订阅者

在 SideMenu.js（订阅者）里面引入 store，在 componentDidMount 生命周期中做订阅者配置

// SideMenu.js 文件

componentDidMount(){
    store.subscribe(()=>{   //订阅
        console.log('有人通知我更新了')
    })
}

（2）发布者

在 TopHeader.js（发布者）引入 store

// TopHeader.js文件

// 在toggle 方法中做发布配置,发布状态
toggle = (isCollapsed) => {
  //   发布者
  store.dispatch({
    type: "MySideMenuCollapsed", //type值随便写，根据不同的type类型来操作不同的函数
    payload: isCollapsed,
  });
  this.setState({
    collapsed: !this.state.collapsed,
  });
};

在点击事件中传递一个参数，在 toggle 方法中接收这个参数

// TopHeader.js文件

{
  this.state.collapsed ? (
    <MenuUnfoldOutlined onClick={() => this.toggle(true)} className="toggle" />
  ) : (
    <MenuFoldOutlined onClick={() => this.toggle(false)} className="toggle" />
  );
}

点击这个按钮之后，一会是 true，一会是 false，那这个发布者都发布到什么地方了呢？

（3）store.js

还记得我们创建的 store.js 文件吗？

// store.js 文件

import { createStore } from "redux";
const reducer = (prevState, action) => {
  console.log(action);
  return prevState;
};
const store = createStore(reducer);
export default store;

里面的 reducer 传递的第二个参数 action 就是发布者发布的这个对象，我们可以打印一下看看。
当我们点击按钮的时候，一会是 true，一会是 false，可以看下面图片

应为此时我们还是返回一个老状态，因此页面是不会有什么变化的。
下面我们来进行下面的操作：
首先：给老状态一个默认值，
然后：我们深复制一份老状态
最后：返回一个新状态
此时，只要状态已返回，就已经自动同步了

// store.js 文件

import { createStore } from "redux";
const reducer = (
  prevState = {
    isCollapsed: false, // 给老状态设置一个默认值
  },
  action
) => {
  console.log(action);
  //   深复制老状态
  var newState = { ...prevState };
  newState.isCollapsed = action.payload;
  //   返回一个新状态
  return newState;
};
const store = createStore(reducer);
export default store;

4.订阅者接收发布者传来的状态

这时，我们再看 SideMenu.js 文件
在此文件中，我们需要用 store.getState()方法获取一下

// SideMenu.js 文件
componentDidMount(){
    store.subscribe(()=>{
        console.log('有人通知我更新了')
        this.setState({
            collapsed:store.getState().isCollapsed
        })
        store.getState()
    })
}

此时，我们就已经实现了侧边栏的展开与合并

最后一起重新捋一遍流程：

1.创建 store.js 文件，配置 store ;
2.在发布者（TopHeader.js）文件的点击事件中操作状态，发布状态;

store.dispatch({
    type: "MySideMenuCollapsed",
    payload: isCollapsed,
}); 

3.状态（一个对象）会直接传到 store.js 文件中的 reducer 方法的第二个参数 action ;
4.深复制老状态，返回一个新状态;
5.在订阅者（SideMenu.js）文件中的 componentDidMount 生命周期通过 store.subscribe()进行订阅，传过来的新状态需要用 store.getState()方法获取一下。

store.subscribe(()=>{
    console.log('有人通知我更新了')
    this.setState({
        collapsed:store.getState().isCollapsed
    })
    store.getState()
})

下面一篇，我们来一起看一下react-redux的操作流程