浅谈React中Redux的工作流程和基本使用

Redux作为经典的状态管理工具为不少前端人士所青睐，但是也是诸多新朋友在学习新框架中一个相对而言较难的点，网上有很多关于Redux的帖子但是都过于笼统本次我将以个人理解浅谈在React JS库中 Redux基本流程和使用

我将用一个例子来为大家讲述在React 中我们的 Redux 是怎样一个角色。
Redux就像一家餐厅，对于不同的人而言都可以到这家餐厅进行就餐，不管这些人是家人关系、是朋友关系、或同学关系、或者毫不相干。

在Redux中有三个核心的概念:store、reducer、action。它的工作原理也是基于这几个概念来进行的例如下面这张图：

从这张图我们不难看出Redux就是通过store来存储应用状态，而且内置了方法来存取状态；而action则可以理解为就是普通的函数通过传入不同值来返回不同的值和一个Type；reduucer则是根据action的不同Type而对原始状态进行浅拷贝并进行相关处理后返回一个新的状态而应用通过store.dispatch()派发不同action时取到的则变成了reducer处理后返回的新状态，这也是所谓的单向数据流，当然如果我们没有进行类似于本地存储的情况下，刷新应用所有获取到的store的状态还是起初的初始状态。

这么说对于不少人来说同样不易于理解，那么我们还是回到餐厅的例子：

我们来对比一下整个应用就像餐厅所有的顾客，不同顾客就是不同的组件，而store中的初始状态就像餐厅固定的菜单，服务员就像store提供的方法比如getState( )和dispatch( )，厨师就是reducer，老板对于厨师的要求则是action。

那么我们看一下在这个简单的例子中类似Redux单向数据流的工作流程是什么样子的。

首先每位顾客哪怕毫不相干都可以通过服务员点到菜单上的蛋炒饭。
可是某些顾客告诉老板别的店蛋炒饭都有香肠还是一样的价钱，能不能加香肠，老板心情好告诉厨师今天蛋炒饭都加香肠，那么接下来如果有客人再通过服务员点蛋炒饭得到的就是厨师根据老板的要求做出的香肠蛋炒饭，可是菜单上打印的依然是蛋炒饭没有改变。
等新的一天没有顾客跟老板较真的时候，顾客正常点餐依旧是不加香肠的蛋炒饭。

相信通过这个例子大家可以更为直观的对Redux的工作流程有所了解，下面我们来看在 React 中 Redux 的基本使用:

打开我们的命令行工具输入：
npm install redux --save 进行安装
我们以一个简单的计数器为例要做的就是将store初始值放到组件中显示并通过加减按钮来变化这个值明白需求之后根据Redux的三个核心我们创建对应的文件：

创建store:

import { createStore } from "redux";   // 导入创建store的方法
import reducer from "/路径";         // 这里的reducer我们后续创建
const store = createStore(reducer);
export default store;

reducer:

const initialState = { count: 0 };
export default function counter(state = initialState, action) { 
 switch (action.type) {  
   case "INCREMENT":  
     return { ...state, count: state.count + 1 }; 
   case "DECREMENT": 
     return { ...state, count: state.count - 1 }; 
   default: 
     return state;
}}

使用store中状态的组件中通过引入先前我们创建的store，并通过store.getState() 的方法读取并渲染到页面上:

import React from "react";
import store from "../store/index";
export default class DemoOne extends React.Component {
  render() {
      return (
            <div>
                 {store.getState().count}  {/* 获取到store中的状态值 */}
                 <button>inc</button>
                 <button>dec</button>
           </div>);  }}

在这里插入图片描述

现在我们来通过按钮点击调用 store.dispatch() 来改变这个状态值,这里作个提醒，这种使用方法当我们通过reducer返回新的状态的时候页面并不会重新渲染所以我们要配合另一个方法 store.subscribe() 对其进行一个订阅，当状态发生变化时我们使用setState()去实现页面重新渲染:

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

export default class DemoOne extends React.Component{
	constructor(props){
	   super(props)
	   this.state = {
	   	number:store.getState().count  // 取出数据赋值给number
	   }				
	   store.subscribe(()=>{  // 一旦状态发生变化重新更新number
	   	this.setState({	// 从而是页面重新渲染
	   	     number:store.getState().count
	   	})
	   })   
       }
       render() {
         let { number } = this.state;
         return (
               <div>
                   {number}
                   <button onClick={() => store.dispatch({ type: "INCREMENT" })}>inc</button>
                   <button onClick={() => store.dispatch({ type: "DECREMENT" })}>dec</button>
               </div>
                );
      }
}

在这里插入图片描述

到这里我们就完成了在React中使用Redux实现计数器的简单功能

此次介绍了在React中Redux的工作流程和基本的使用，后续我将继续为大家阐述Redux更加方便的使用方式以及我们在项目开发中如何使用Redux，谢谢~~~

MatthewCapet

发布了1 篇原创文章 · 获赞 3 · 访问量 68

私信关注

浅谈React中Redux的工作流程和基本使用

猜你喜欢